原生JS实现动态返回顶部

最新推荐文章于 2022-06-20 20:06:32 发布

骆小胖

最新推荐文章于 2022-06-20 20:06:32 发布

阅读量2.1k

点赞数 4

分类专栏：教学笔录 JS 笔记随笔前端积累文章标签：教学笔录 JS 笔记随笔前端积累 ViewUI

本文链接：https://blog.csdn.net/qq_42445490/article/details/88819064

版权

前端积累同时被 3 个专栏收录

105 篇文章 0 订阅

订阅专栏

笔记随笔

75 篇文章 0 订阅

订阅专栏

教学笔录

73 篇文章 0 订阅

订阅专栏

【前言】

经常看到网页中有回到顶部的效果，今天也研究一下回到顶部有哪些方法。众所周知，用锚链接是实现回到最简单的方法，但是从用户体验效果来说，并不是最好的。（锚链接回到顶部时太快了，而且用户可能在看到某个感兴趣的东西想停下来，却停不下来）

【主体】

针对上面的缺点，我们试着用Javascript的方法来得到实现。思路是这个样子的：

1、首先用html和css构建基本的例子，代码如下

html部分：
        <div class="box">
            <img src="1.jpg"/>
        </div>
        <a href="javascript:;" id="btn" title="回到顶部"></a>  
css部分：
        .box { width: 1190px; margin: 0 auto; }
        #btn{ width: 40px; height: 40px; position: fixed; right: 0px; bottom: 60px; background: url(2.jpg) no-repeat left top; }
        #btn:hover{ background: url(2.jpg) no-repeat left -40px; }

在这里应该注意的是：href="javascript:;"的目的是为了阻止浏览器默认行为。

2、下面我们就可以用Javascript来控制我们的例子

　　a、首先模仿锚链接回到顶部的效果，代码如下：

window.onload  = function(){
    var obtn = document.getElementById('btn');
    obtn.onclick = function(){             
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        document.documentElement.scrollTop = document.body.scrollTop = -200;                       
    };
}

这里的效果为，鼠标每点击一次，向上移动200像素（200像素是可以变化的），然后我们发现每次都要点击觉得很麻烦，这里我们不妨为它添加一个定时器函数

　　b、添加定时器函数，代码如下：

var timer = null;//在前面声明
timer = setInterval(function(){},30);//里面接的是移动200px效果

　在这里，我们觉得还不是那么的好，比如说“别人家”的效果距离顶部越近的时候，速度越慢；并且我们中间还有一个问题就是回到顶部之后，在想继续往下看时不会继续往下了。

　　c、清除定时器效果并控制回到顶部的速率，代码如下：

//改变回到顶部的速度
var isSpeed = Math.floor(-osTop/6)
document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
//清除定时器效果
if(osTop == 0){
    clearInterval(timer);
}

到这里，我们的效果差不多完成了，但是还是不能在滚动条滚动的时候，看到感兴趣的内容停下来。

　　d、滚动条滚动即停，代码如下：

var isTop = true;//先声明
//滚动条滚动时触发             
window.onscroll = function(){               
    if(!isTop){
        clearInterval(timer);
    }
    isTop = false;
};
isTop = true;//添加在obtn.onclick事件的timer中

到这里，我们还有一点小小的地方可以改动，就是当在可视窗口中，回到顶部是不出现的，到达一定值后才出现

　　e、回到顶部的显示与隐藏，代码如下：

/*在css中添加如下代码：*/
#btn{display: none;}
 
//获取页面的可视窗口高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
 
/*在window.onscroll中添加如下代码，控制显示与隐藏*/
//在滚动的时候增加判断
var osTop = document.documentElement.scrollTop || document.body.scrollTop;//特别注意这句，忘了的话很容易出错
if (osTop >= clientHeight) {
    obtn.style.display = 'block';
}else{
    obtn.style.display = 'none';
}

这样，回到顶部的效果就实现了，我们在看下完整的代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>返回顶部练习</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			height: 2000px;
			width: 100%;
		}
		.to_top{
			width: 60px;
			height: 60px;
			position: fixed;
			bottom: 20%;
			right: 20px;
			font-size: 40px;
			line-height: 70px;
			border: none;
			background: rgba(0,0,0,0.2);
			cursor: pointer;
			opacity: 0;
			/*display: none;*/
			transition: all 1s;
		}
		.to_top:hover{
			background: rgba(0,0,0,0.4);
			color: white;
		}
	</style>
</head>
<body>
	<button class="to_top">^</button>
	<script type="text/javascript">
		window.onload =function(){
			var timer = null;//时间标识符
			var isTop = true;
			
			var obtn = document.getElementsByClassName('to_top')[0];
		    obtn.onclick = function(){
		    	// 设置定时器
		    	timer = setInterval(function(){
		    		var osTop = document.documentElement.scrollTop || document.body.scrollTop;
		    		//减小的速度
                    var isSpeed = Math.floor(-osTop/6);
		        	document.documentElement.scrollTop = document.body.scrollTop = osTop+isSpeed; 
		        	//判断，然后清除定时器
	                if (osTop == 0) {
	                    clearInterval(timer);
	                } 
	                isTop = true;//添加在obtn.onclick事件的timer中    
		    	},30);                          
		    };
		    //获取页面的可视窗口高度
            var client_height = document.documentElement.clientHeight || document.body.clientHeight;
		    //滚动条滚动时触发             
			window.onscroll = function(){ 
				//在滚动的时候增加判断,忘了的话很容易出错
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
				if (osTop >= client_height) {
				    obtn.style.opacity = '1';
				}else{
				    obtn.style.opacity = '0';
				}         
			    if(!isTop){
			        clearInterval(timer);
			    }
			    isTop = false;
			};
		}
	</script>

<!-- 	DOM：
	    1、document.getElementById()
	    2、document.documentElement.scrollTop
	    3、document.body.scrollTop
	事件：
	    1、window.onload
	    2、window.onscroll
	    3、obtn.onclick
	定时器的使用：
	    1、setInterval(function(){},30)
	    2、clearInterval(timer) -->
	    
</body>
</html>

到这里，还要小结一下，在中间我们运用的知识点：

知识点回顾：
 
DOM：
    1、document.getElementById()
    2、document.documentElement.scrollTop
    3、document.body.scrollTop
事件：
    1、window.onload
    2、window.onscroll
    3、obtn.onclick
定时器的使用：
    1、setInterval(function(){},30)
    2、clearInterval(timer)

骆小胖

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
原生JS实现动态返回顶部

户体验效果来说，并不是最好的。（锚链接回到顶部时太快了，而且用户可能在看到某个感兴趣的东西想停下来，却停不下来）【主体】针对上面的缺点，我们试着用Javascript的方法来得到实现。思路是这个样子的：1、首先用html和css构建基本的例子，代码如下html部分： &lt;div class="box"&gt; &lt;img src="1.jpg"/&gt
复制链接

扫一扫