0
0

这几种方法帮你快速实现回到页面顶部

🚀 优质资源分享 🚀

学习路线指引（点击解锁）知识定位人群定位🧡 Python实战微信订餐小程序 🧡进阶级本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。💛Python量化交易实战💛入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

背景介绍

当页面内容很多的时候，用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时，他可能需要不断滚动鼠标滚轮，这就导致用户体验将很差。鉴于这种情况， “回到顶部”这一功能便出现了。

如今在我们浏览网站的时候，常常能遇见“回到顶部”这个按钮。目前主流的回到页面顶部分表现为两种，一种是直接回到页面的顶部，这种方式简单粗暴；另外一种则是自动滚动间接回到页面顶部，这样一来视觉体验上可能更好，但是用户需要过几秒才能看到顶部内容。

例如掘金，在滚动到一定高度时会出现“回到顶部”按钮，点击后会直接回到页面顶部，就是上文说到的第一种情况。

实现

动态显示滚动按钮

“回到顶部”并不是一直显示的，而是滚动到一定值才出现的，因此应该在window.onscroll里定义一个判断事件。

  1. window.onscroll = function () {
  2.   var currentHeight =
  3.     document.documentElement.scrollTop ||
  4.     window.pageYOffset ||
  5.     document.body.scrollTop;
  6.   // 页面滚动超过300px就显示
  7.   if (currentHeight > 300) {
  8.     document.getElementById('backtop').style.display = 'block'
  9.   } else {
  10.     document.getElementById('backtop').style.display = 'none'
  11.   }
  12. }

直接回到顶部

锚点

最简单的方法。给顶部的div一个id，点击直接回到这个div元素，但是URL上会出现#top。

  1. <div id="top">div>
  2. ......
  3. <a href="#top">回到顶部a>

scrollTo函数

控制滚动条回到指定位置，第一个参数是距离页面左端的距离，第二个参数是距离页面顶部的距离。

  1. <a href="javascript:scrollTo(0, 0)">回到顶部a>

scrollTop函数

控制滚动条垂直偏移。

  1. "byScrollTop()">回到顶部
  2. ......
  3. function byScrollTop() {
  4.   document.documentElement.scrollTop = 0;
  5.   window.pageYOffset = 0; // 兼容ios
  6.   document.body.scrollTop = 0; // 兼容低版本ie
  7. }

scrollBy函数

该方法可把内容滚动指定的像素数。第一个参数指向右滚动的像素，第二个参数指向下滚动的参数，负数可使方向相反。

  1. "byScrollBy()">回到顶部
  2. ......
  3. function byScrollBy() {
  4.   var topHeight =
  5.     document.documentElement.scrollTop ||
  6.     window.pageYOffset ||
  7.     document.body.scrollTop;
  8.   scrollBy(0, -topHeight);
  9. }

间接回到顶部

定时器实现滚动动画

通过定时器实现固定速度的自动滚动动画效果。但是这样会有个问题，就是当页面内容十分多的时候，这个时候离顶部已经有很长一段距离了。如果还是一个固定速度的话，可能会长达10秒钟，这对用户体验来说是不友好的。

  1. "scrollToTop()">回到顶部
  2. ......
  3. function scrollToTop() {
  4.   var topHeight =
  5.     document.documentElement.scrollTop ||
  6.     window.pageYOffset ||
  7.     document.body.scrollTop;
  8.   scrollBy(0, -100);
  9.   // 模拟鼠标向上滚动事件
  10.   scrolldelay = setTimeout('scrollToTop()', 50);
  11.   // 清除滚动事件，避免无法向下移动
  12.   if (topHeight === 0) {
  13.     clearTimeout(scrolldelay);
  14.     scrolldelay = null;
  15.   }
  16. }

定时器实现滚动动画-改良版

基于上面这个问题，我们可以设置一个速度的最小值，让滚动速度从快到慢，但也不至于过慢。

  1. function scrollToTop() {
  2.   var topHeight =
  3.     document.documentElement.scrollTop ||
  4.     window.pageYOffset ||
  5.     document.body.scrollTop;
  6.   var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;
  7.   scrollBy(0, -speed);
  8.   // 模拟鼠标向上滚动事件
  9.   scrolldelay = setTimeout('scrollToTop()', 50);
  10.   // 清除滚动事件，避免无法向下移动
  11.   if (topHeight === 0) {
  12.     clearTimeout(scrolldelay);
  13.     scrolldelay = null;
  14.   }
  15. }

最终效果

完整代码

  1. <style>
  2.  a {
  3.  display: block;
  4.  }
  6.  #top {
  7.  height: 2000px;
  8.  background-color: #999
  9.  }
  11.  #backtop {
  12.  display: none;
  13.  position: fixed;
  14.  bottom: 20px;
  15.  right: 30px;
  16.  background-color: #fff;
  17.  z-index: 9;
  18.  }
  19. style>
  21. <body>
  22.     <div id="top">
  23.         这里是页面顶部
  24.     div>
  25.     <div id="backtop">
  26.         <a href="#top">回到顶部-锚点a>
  27.         <a href="javascript:scrollTo(0, 0)">回到顶部-scrollTo函数a>
  28.         <a onclick="byScrollTop()">回到顶部-scrollTop函数a>
  29.         <a onclick="byScrollBy()">回到顶部-scrollBy函数a>
  30.         <a onclick="scrollToTop()">回到顶部-定时器动画版a>
  31.     div>
  32.     <script>
  33.  window.onscroll = function () {
  34.  var currentHeight =
  35.  document.documentElement.scrollTop ||
  36.  window.pageYOffset ||
  37.  document.body.scrollTop;
  38.  console.log(currentHeight, "currentHeight");
  39.  if (currentHeight > 300) {
  40.  document.getElementById('backtop').style.display = 'block'
  41.  } else {
  42.  document.getElementById('backtop').style.display = 'none'
  43.  }
  44.  }
  46.  function byScrollTop() {
  47.  document.documentElement.scrollTop = 0;
  48.  window.pageYOffset = 0; // 兼容ios
  49.  document.body.scrollTop = 0; // 兼容低版本ie
  50.  }
  52.  function byScrollBy() {
  53.  var topHeight =
  54.  document.documentElement.scrollTop ||
  55.  window.pageYOffset ||
  56.  document.body.scrollTop;
  57.  scrollBy(0, -topHeight);
  58.  }
  60.  function scrollToTop() {
  61.  var topHeight =
  62.  document.documentElement.scrollTop ||
  63.  window.pageYOffset ||
  64.  document.body.scrollTop;
  65.  var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;
  66.  scrollBy(0, -speed);
  67.  // 模拟鼠标向上滚动事件
  68.  scrolldelay = setTimeout('scrollToTop()', 50);
  69.  // 清除滚动事件，避免无法向下移动
  70.  if (topHeight === 0) {
  71.  clearTimeout(scrolldelay);
  72.  scrolldelay = null;
  73.  }
  74.  }
  75.  script>
  76. body>
标签： 计算机
本文转载自: https://blog.csdn.net/u012804784/article/details/124380240
版权归原作者 u012804784 所有， 如有侵权，请联系我们删除。
登录后发布评论

“这几种方法帮你快速实现回到页面顶部”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？