返回页面顶部

於小夜

已于 2022-07-15 18:54:17 修改

阅读量400

点赞数

分类专栏： JS 文章标签： javascript html5 html

于 2022-07-15 10:18:39 首次发布

本文链接：https://blog.csdn.net/sunzequan888/article/details/125798639

版权

在制作网站的时候，网站特别长，就需要制作一个返回顶部的快捷按钮。那么，怎么返回顶部呢？这里有几种方法。

<a href="#top">返回顶部</a>

这是通过锚点来实现的，但是点击之后，url地址栏后面会加上一个#top，而且没有动画，特别不好看。

function returnTop() {
    document.documentElement.scrollTop = 0;
    window.pageYOffset = 0;
    document.body.scrollTop = 0;
}

这是直接返回，没有动画效果。

function returnTop() {
	var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
	var rtp = setInterval(function() {
		scrollTop -= 70; // 这里的70是可以改的，数越大，滚动的速度越快
		if (scrollTop < 0) {
			scrollTop = 0;
		}
		document.documentElement.scrollTop = scrollTop;
		window.pageYOffset = scrollTop;
		document.body.scrollTop = scrollTop;
		if (scrollT