原生JavaScript实现按钮点击滚动到顶部效果

最新推荐文章于 2024-07-05 10:20:02 发布

到中流遏飞舟

最新推荐文章于 2024-07-05 10:20:02 发布

阅读量1.4k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_38746380/article/details/83592503

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

			window.onload = function(){
	            var btn = document.getElementById("scrollTop");
	            var timer = null;
	            var oScroll = true;
	            //滚动条事件,触发时清空定时器
	            window.onscroll = function(){
	                if(!oScroll){
	                    clearInterval(timer);
	                }
	                oScroll = false;
	            }
	            btn.onclick = function(){
	                //加入定时器让他又快到慢滚动到顶部
	                timer = setInterval(function(){
	                    //获取当前scrollTop的高度位置（兼容ie和chrom浏览器）
	                    var oTop = document.documentElement.scrollTop || document.body.scrollTop;
	                    //设置速度由快到慢
	                    var ispeed = Math.floor(-oTop / 7);
	                    document.documentElement.scrollTop = document.body.scrollTop = oTop + ispeed;
	                    oScroll = true;
	                    if(oTop == 0){
	                        clearInterval(timer);
	                    }
	                },30);
	            }
        	}

上文原文：https://blog.csdn.net/liuxin_1991/article/details/78792697

模仿上文的风格写了一个在div内的效果
首先需要弄明白这几个属性：
clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。
offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。
scrollHeight：因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight == clientHeight恒成立。单位px，只读元素。
offsetTop：当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
scrollTop：代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。
摘自：https://www.imooc.com/article/17571

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS实现效果-点击按钮返回到页面顶部</title>
        <style>
           #container{
           		width: 800px;
           		height: 600px;
           		margin:auto;
           		top: 0;
           		left: 0;
           		right: 0;
           		bottom: 0;
           		background: gainsboro;
           		overflow: scroll;
           }
           
        </style>
        
        <script type="text/javascript">
        	
        	window.onload = function(){
	            var btn = document.getElementById("scrollTop");
	            var con = document.getElementById("container");
	            var timer = null;
	            var oScroll = true;
	            //滚动条事件,触发时清空定时器
	            con.onscroll = function(){
	                if(!oScroll){
	                    clearInterval(timer);
	                }
	                oScroll = false;
	            }
	            btn.onclick = function(){
	                //加入定时器让他又快到慢滚动到顶部
	                timer = setInterval(function(){
	                    var oTop = con.scrollTop;
	                 
	                    //设置速度由快到慢
	                    var ispeed = Math.floor(-oTop / 7);
	                    con.scrollTop = oTop + ispeed;
	                    oScroll = true;
	                    if(oTop == 0){
	                        clearInterval(timer);
	                    }
	                },30);
	            }
        	}
        </script>
        
    </head>
    <body>
    	<button id="scrollTop">
    		TOP
    	</button>
        <div id="container">
        	<div>
        		......//测试部分省略
        	</div>
        </div>
    </body>
</html>