具体效果就和本站一样

添加以下代码到网站中

<html>
<head>
..
<!-- 需要jQuery才能使用 -->
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.js"></script>
<!-- 还要添加样式 -->
<style>
..
/* 返回顶部 */
@media (max-width: 1000px) {
  #back-to-top {
      display: none !important;
  }
}

#back-to-top {
  cursor: pointer;
  position: fixed;
  right: 80px;
  top: -800px;
  z-index: 1;
  width: 70px;
  height: 800px;
  background: url(img/top.png);
  transition: all .8s ease-in-out;
  opacity: 1;
}
</style>
</head>
<body>
..
<!-- 返回顶部 -->
<div id="back-to-top"></div>
<script>
    $(function() {
        $(window).scroll(function(){
            if ($(window).scrollTop() > 500) {
                $('#back-to-top').css('top', '-100px')
            } else {
                $('#back-to-top').css('top', '-800px')
            }
        })
        $('#back-to-top').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 600)
        })
    })
</script>
</body>
</html>

最后添加一张图片到css对应的路径即可
../img/top.png

图片下载地址:
https://cym.cm/usr/themes/cym/img/top.png

标签: 网站, 返回顶部

添加新评论