无需用任何库的Back To Top代码分享
juse 9月前

预览

HTML

<button class="backtotop" onclick="scrollToTop()">
 <span class="sr-only">返回顶部</span>
</button>

注意这个sr-only的类是Font Awesome的css,如果你没有引用Font Awesome的css,就加一行代码

.sr-only{text-indent: -9999px;overflow: hidden;}

CSS

.backtotop{position:fixed;bottom:20px;right:20px;width:64px;height:64px;border:none;border-radius:50%;background-color:#33333330;color:#fff;font-size:20px;line-height:64px;text-align:center;cursor:pointer;transition:background-color.3s,transform.3s;z-index:10}.backtotop{background:url('data:image/svg+xml;base64,PHN2ZyB0PSIxNzEwNzAyMTAwOTkyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc5MzgiPjxwYXRoIGQ9Ik0wIDUxMkMwIDIyOS4yMjI0IDIyOS4yMjI0IDAgNTEyIDBzNTEyIDIyOS4yMjI0IDUxMiA1MTItMjI5LjIyMjQgNTEyLTUxMiA1MTJTMCA3OTQuNzc3NiAwIDUxMnoiIGZpbGw9IiMyRDZDRkMiIHAtaWQ9Ijc5MzkiPjwvcGF0aD48cGF0aCBkPSJNNjU2LjQzNTIgNDYzLjQzNjhjMi42NjI0LTE3NC4yODQ4LTEzOS4zOTItMjUzLjI2MDgtMTQ4LjkxNTItMjU4LjM4MDhWMjA0LjhsLTAuMjU2IDAuMTI4LTAuMjU2LTAuMTI4djAuMjU2Yy05LjU3NDQgNS4xMi0xNTEuNjI4OCA4NC4wOTYtMTQ4Ljk2NjQgMjU4LjM4MDgtMjguOTI4IDE4Ljg2NzItNTkuMjM4NCA1Mi40Mjg4LTU0LjQgMTEwLjQzODQgNC44MTI4IDU4LjAwOTYgNjAuNTk1MiA5Ni40NjA4IDgxLjk0NTYgOTQuMzg3MiAyMS4zNzYtMi4wOTkyIDE1LjE1NTItMTguMTc2IDE1LjE1NTItMTguMTc2bDcuMzIxNi0zMC4wOHMzMS40ODggNDguMzU4NCA0MS41NzQ0IDQ4LjMzMjhjOS4wNjI0LTAuNzY4IDUyLjIyNC0wLjA3NjggNTcuMzQ0IDBoMC41MTJjNS4xNDU2LTAuMDc2OCA0OC4yODE2LTAuNzY4IDU3LjM0NCAwIDEwLjA4NjQgMCA0MS42LTQ4LjMzMjggNDEuNi00OC4zMzI4bDcuMjk2IDMwLjA1NDRzLTYuMTk1MiAxNi4xMjggMTUuMTU1MiAxOC4xNzZjMjEuMzc2IDIuMDk5MiA3Ny4xNTg0LTM2LjM1MiA4MS45NzEyLTk0LjM2MTYgNC44MTI4LTU3Ljk4NC0yNS40OTc2LTkxLjU3MTItNTQuNDI1Ni0xMTAuNDM4NHogbS0xNDkuMTk2OC0yLjU2Yy00LjA0NDgtMC4wNzY4LTU2Ljg1NzYtMi4wMjI0LTYxLjcyMTYtNjQuMzA3MiAxLjc2NjQtNTkuMjM4NCA1Ny41NzQ0LTY0LjQ2MDggNjEuNzIxNi02NC43NjggNC4xNzI4IDAuMzA3MiA1OS45ODA4IDUuNTI5NiA2MS43NDcyIDY0Ljc2OC00Ljg2NCA2Mi4yODQ4LTU3LjcwMjQgNjQuMjU2LTYxLjc0NzIgNjQuMzA3MnogbS0zMS4yMDY0IDMwMC4zMTM2YzAgNy4xMTY4LTUuNjMyIDEyLjgyNTYtMTIuNTk1MiAxMi44MjU2YTEyLjcyMzIgMTIuNzIzMiAwIDAgMS0xMi42NDY0LTEyLjhWNjk3Ljg1NmMwLTcuMDY1NiA1LjYzMi0xMi44IDEyLjY0NjQtMTIuOCA2LjkzNzYgMCAxMi41OTUyIDUuNzM0NCAxMi41OTUyIDEyLjh2NjMuMzg1NnogbTQ2LjQxMjggMzQuMzI5NmExMi45MDI0IDEyLjkwMjQgMCAwIDEtMTIuOCAxMi45NzkyIDEyLjkwMjQgMTIuOTAyNCAwIDAgMS0xMi44LTEyLjk1MzZ2LTk0LjI1OTJjMC03LjE2OCA1LjcwODgtMTMuMDA0OCAxMi43NDg4LTEzLjAwNDggNy4wOTEyIDAgMTIuODUxMiA1LjgzNjggMTIuODUxMiAxMy4wMDQ4djk0LjI1OTJ6IG00Mi42NzUyLTQ5LjIwMzJjMCA3LjA2NTYtNS42MzIgMTIuOC0xMi42MjA4IDEyLjhhMTIuNzQ4OCAxMi43NDg4IDAgMCAxLTEyLjYyMDgtMTIuOHYtNDUuMjM1MmMwLTcuMDQgNS42MzItMTIuNzc0NCAxMi42MjA4LTEyLjc3NDQgNi45NjMyIDAgMTIuNjIwOCA1LjczNDQgMTIuNjIwOCAxMi44djQ1LjIwOTZ6IiBmaWxsPSIjRkZGRkZGIiBwLWlkPSI3OTQwIj48L3BhdGg+PC9zdmc+')center center no-repeat;background-size:48px}.backtotop:hover{background-color:#33333330}.dark.backtotop:hover{background-color:#ccae2a1a}.backtotop svg{width:48px;height:48px;fill:#fff}

Javascript

<script type="text/javascript">
// 获取返回顶部按钮元素
var backToTopButton = document.querySelector('.backtotop');

// 当用户滚动时,检查页面滚动距离是否超过100像素
window.addEventListener('scroll', function() {
 if (window.pageYOffset > 100) {
  // 如果滚动距离大于100像素,显示返回顶部按钮
  backToTopButton.style.display = 'block';
 } else {
  // 如果滚动距离小于等于100像素,隐藏返回顶部按钮
  backToTopButton.style.display = 'none';
 }
});

// 点击返回顶部按钮时,平滑滚动到页面顶部
function scrollToTop() {
  var scrollDuration = 800; // 滚动到顶部的持续时间(毫秒)
  var scrollStep = -window.scrollY / (scrollDuration / 15);

  function scrollAnimation(currentTime) {
    var currentTime = currentTime || 0;
    var scrollInterval = 15; // 每次滚动的时间间隔(毫秒)

    var newScrollPosition = window.scrollY + scrollStep * scrollInterval;
    if (newScrollPosition <= 0) {
      window.scrollTo(0, 0);
      return;
    }

    window.scrollTo(0, newScrollPosition);
    requestAnimationFrame(function(timestamp) {
      scrollAnimation(timestamp);
    });
  }

  requestAnimationFrame(function(timestamp) {
    scrollAnimation(timestamp);
  });
}

</script>
最后于 3月前 被juse编辑 ,原因:
最新回复 (6)
全部楼主
  • tougaoke
    9月前 2
    0
    面对如此强贴,论遇到多大阻力,只要我一息上尚存,就绝不会让它沉沦下去,这一点请楼主放心。 
  • weige
    9月前 3
    0
    顶顶顶顶顶顶顶!!!
  • weige
    9月前 4
    0
    楼主,你写得实在是太好了。我惟一能做的,就只有把这个帖子顶上去这件事了。 
  • 3148647472
    9月前 5
    0
    面对如此强贴,论遇到多大阻力,只要我一息上尚存,就绝不会让它沉沦下去,这一点请楼主放心。 
  • 2227290227
    8月前 6
    0
    不错的帖子!
  • Avid4296
    8月前 7
    0
    哈哈,不错哦!
返回
juse
三级用户组
30
主题数
243
帖子数
扫码访问