实现的效果：页面滚动一定像素大小的位置后，显示出返回顶部按钮，点击该按钮，页面缓慢自动滚动到顶部。

HTML代码：

<div id="box"></div>
<div id="btn">返回顶部</div>

CSS代码：

PS：以下样式代码仅供测试，可以修改为自己喜欢的样式

body {position:relative; margin:0; padding:0;}
#box {width:200px; height:4000px; background-color:green;}
#btn {width:50px; height:50px; background-color:red; position:fixed; bottom:10px; right:10px; cursor:pointer; display:none;}

javascript代码：

window.onload = function(){ //文档加载完成后
	var box = document.getElementById("box"); //获取DOM对象
	var btn = document.getElementById("btn"); //获取DOM对象
	var timer = null; //定义timer
	window.onscroll = function(){ //窗口开始滚动
		var scroll_top = document.documentElement.scrollTop || document.body.scrollTop; //获取滚动的高度
		var scrollheight = document.body.scrollHeight; //获取文档的高度 
		if(scroll_top < 300){ //判断滚动的高度是否小于300px
			btn.style.display="none"; //如果是则不显示“返回顶部”按钮
		}else{
			btn.style.display="block"; //如果不是则显示“返回顶部”按钮
		}
		btn.onclick=function(){ //点击返回顶部按钮
			clearInterval(timer) //停止执行timer函数
			if(scroll_top > 0){ //当滚动的高度大于0px时
				timer = setInterval(function(){ //执行函数
					var speed = (0 - scroll_top) / 8; //定义速度
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //计算
					scroll_top = scroll_top + speed;
					console.log(scroll_top)
					document.documentElement.scrollTop = scroll_top;
					if(scroll_top<=0){ //当滚动的小于或等于0px时
						clearInterval(timer); //停止执行timer函数
						alert("结束了"); //弹出提示窗口
					}
				},30)                
			} 
		}
	}               
}

代码来自：https://blog.csdn.net/namechenfl/article/details/81380566

本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。