怎样才能返回首页（这几种方法帮你快速实现回到页面顶部）

时间2025-06-01 05:45:38分类IT科技浏览8416

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

背景介绍

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

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

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

实现

动态显示滚动按钮

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

window.onscroll = function () { var currentHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; // 页面滚动超过300px就显示 if (currentHeight > 300) { document.getElementById(backtop).style.display = block } else { document.getElementById(backtop).style.display = none } }

直接回到顶部

锚点

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

scrollTo函数

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

scrollTop函数

控制滚动条垂直偏移。

<a onclick="byScrollTop()">回到顶部</a> ...... function byScrollTop() { document.documentElement.scrollTop = 0; window.pageYOffset = 0; // 兼容ios document.body.scrollTop = 0; // 兼容低版本ie }

scrollBy函数

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

<a onclick="byScrollBy()">回到顶部</a> ...... function byScrollBy() { var topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; scrollBy(0, -topHeight); }

间接回到顶部

定时器实现滚动动画

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

<a onclick="scrollToTop()">回到顶部</a> ...... function scrollToTop() { var topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; scrollBy(0, -100); // 模拟鼠标向上滚动事件 scrolldelay = setTimeout(scrollToTop(), 50); // 清除滚动事件，避免无法向下移动 if (topHeight === 0) { clearTimeout(scrolldelay); scrolldelay = null; } }

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

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

function scrollToTop() { var topHeight = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; var speed = topHeight / 10 > 100 ? topHeight / 10 : 100; scrollBy(0, -speed); // 模拟鼠标向上滚动事件 scrolldelay = setTimeout(scrollToTop(), 50); // 清除滚动事件，避免无法向下移动 if (topHeight === 0) { clearTimeout(scrolldelay); scrolldelay = null; } }

最终效果

完整代码

展开全文READ MORE

em什么标签（emlog标签插件：提升博客内容管理效率的利器）