原生js、实现缓慢回到顶部效果

男孩子小杨

已于 2024-12-31 18:21:50 修改

阅读量2.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：原生js 文章标签：回到顶部 js回到顶部计时器实现回到顶部效果滚动条回到顶部实现回到顶部效果

于 2020-03-04 15:07:03 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43495629/article/details/87388439

原生js 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何使用原生JavaScript实现一个平滑的返回顶部效果，涉及window对象、document对象的使用，以及滚动条信息获取、计时器的应用和Math对象的地板函数。通过设置滚动条事件和计时器，实现页面逐渐滚动回顶部的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生js、实现缓慢回到顶部效果

1.Demo展示：

Alt

2 . Html布局：

	<!--返回顶部-->
	<div class="gotop">
		<img src="images/top/toTop.jpg">
	</div>

3. css样式表：

/*回到顶部*/
	.gotop{
		width:70px;
		height:70px;
		position:fixed;
		top:70%;
		right:50%;
		margin-right:-725px;
		display:none;
		cursor:pointer;
	}
	
	.gotop img{
		width:100%;
		height:100%;
	}

4. 原生js代码：

window.onload = function(){
		var divs = document.querySelector(".gotop");
		//获取可视区域的高度;
		var clientH = document.documentElement.clientHeight;
		var timer = null;
		var Ontop = document.documentElement.scrollTop || document.body.scrollTop;//兼容性设置;	

		window.onscroll = function() {
            //获得滚动条到顶部的距离
            Ontop = document.documentElement.scrollTop || document.body.scrollTop;//兼容性设置;
            if (Ontop > clientH * 2) {
                divs.style.display = "block";
            } else {
                divs.style.display = "none";
            }
            toTop(); //调用回到顶部函数；
        }
		
		//回到顶部函数;
		function toTop(){
			divs.onclick = function(){
			timer = setInterval(function(){ 	
				//让滚动条到顶部的距离自动缩减到0;
				document.documentElement.scrollTop = document.body.scrollTop = Math.floor(Ontop - 200);//兼容性设置;
				//设置定时器
					if(Ontop === 0 || document.documentElement.scrollTop === 0){
						clearInterval(timer);
					}
				},10);
			}
		}
	}

注：
其实，就是对常见的window对象和document对象的一些使用；

可视区域的宽、高:
document.documentElement.clientHeight；
document.documentElement.clientWidth;
滚动条的相关信息：
document.documentElement.scrollTop；
document.body.scrollTop（IE兼容）；
计时器的使用和清除：
setInterval();
clearInterval();
Math对象（向下舍入）
Math.floor();
window.onscroll：滚动条事件（滚动时触发）；