用Javascript实现回到顶部效果
用Javascript实现回到顶部效果
经常看到网页中有回到顶部的效果，今天也研究一下回到顶部有哪些方法。众所周知，用锚链接是实现回到最简单的方法，但是从用户体验效果来说，并不是最好的。（锚链接回到顶部时太快了，而且用户可能在看到某个感兴趣的东西想停下来，却停不下来），针对上面的缺点，我们试着用Javascript的方法来得到实现。思路是这个样子的：
1、首先用html和css构建基本的例子，代码如下
|
1
2
3
4
5
6
7
8
9
10
|
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; background-color: red; 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、首先模仿锚链接回到顶部的效果，代码如下：
|
1
2
3
4
5
6
7
|
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、添加定时器函数，代码如下：
|
1
2
|
var timer = null;//在前面声明
timer = setInterval(function(){},30);//里面接的是移动200px效果
|
在这里，我们觉得还不是那么的好，比如说“别人家”的效果距离顶部越近的时候，速度越慢；并且我们中间还有一个问题就是回到顶部之后，在想继续往下看时不会继续往下了。
c、清除定时器效果并控制回到顶部的速率，代码如下：
|
1
2
3
4
5
6
7
|
//改变回到顶部的速度
var isSpeed = Math.floor(-osTop/6)
document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
//清除定时器效果
if(osTop == 0){
clearInterval(timer);
}
|
到这里，我们的效果差不多完成了，但是还是不能在滚动条滚动的时候，看到感兴趣的内容停下来。
d、滚动条滚动即停，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var isTop = true;//先声明
//滚动条滚动时触发
window.onscroll = function(){
if(!isTop){
clearInterval(timer);
}
isTop = false;
};
isTop = true;//添加在obtn.onclick事件的timer中
|
到这里，我们还有一点小小的地方可以改动，就是当在可视窗口中，回到顶部是不出现的，到达一定值后才出现
e、回到顶部的显示与隐藏，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/*在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';
}
|
这样，回到顶部的效果就实现了，我们在看下完整的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript 回到顶部效果</title>
<style type="text/css">
#btn {
width: 40px;
height: 40px;
position: fixed;
display: none;
right: 0px;
bottom: 30px;
background: url(2.jpg) no-repeat left top;
}
#btn:hover {
background: url(2.jpg) no-repeat 0 -40px;
}
.box {
width: 1190px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<img src="1.jpg" />
</div>
<a href="javascript:;" id="btn" title="回到顶部"></a>
<script type="text/javascript">
window.onload = function() {
var obtn = document.getElementById('btn');
var timer = null;
var isTop = true;
//获取页面的可视窗口高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
//滚动条滚动时触发
window.onscroll = function(){
//在滚动的时候增加判断
var osTop = document.documentElement.scrollTop || document.body.scrollTop;//特别注意这句，忘了的话很容易出错
if (osTop >= clientHeight) {
obtn.style.display = 'block';
}else{
obtn.style.display = 'none';
}
if (!isTop) {
clearInterval(timer);
}
isTop = false;
};
btn.onclick = function(){
//设置定时器
timer = setInterval(function(){
//获取滚动条距离顶部的高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop; //同时兼容了ie和Chrome浏览器
//减小的速度
var isSpeed = Math.floor(-osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
//console.log( osTop + isSpeed);
isTop = true;
//判断，然后清除定时器
if (osTop == 0) {
clearInterval(timer);
}
},30);
};
}
</script>
</body>
</html>
|
到这里，还要小结一下，在中间我们运用的知识点：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
知识点回顾：
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)
|
用Javascript实现回到顶部效果相关推荐
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- 回到顶部效果之加速置顶
我在半年前接触过相关案例,最近重新看了一下,添加了详尽的注释,希望对初学者能有所帮助. <!doctype html> <html> <head> <meta ...
- php 回到顶部,jquery如何实现点击网页回到顶部效果？（图文+视频）
本篇文章主要给大家介绍如何用jquery代码实现网页回到顶部的效果. 我们在浏览各大网站页面时,想必大家肯定都遇到过,当阅览一个长页面时,拉到下面部分会出现类似回到顶部的按钮特效吧. 这种点击回到顶部 ...
- vue 回到顶部效果
最终效果: 回到顶部按钮 BackToTop.vue组件: <template><transition :name="transitionName">< ...
- 如何利用原生JS实现回到顶部以及吸顶效果
<style>.box1{width: 1200px;height: 800px;background-color: pink;margin: 0 auto;}.box2{width: 1 ...
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子--页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享-- <!DOCTYPE html&g ...
- 如何用css写回到顶部,css3 回到顶部书写
回到顶部 JS 代码 backTop = function(){ if(!document.querySelector("#backTop")){return;} ...
- 基于Vue项目的回到顶部插件
在形目中经常要实现回到顶部的效果,所以我在这做了一个回到顶部的插件. 首先,我们先在这说明一下,实现回到顶部的效果所要满足的要求为:要实现回到顶部效果的盒子必须出现横向滚动条. 子组件如下所示: 原理 ...
- 使用scrollTop回到顶部时间
锚链接 使用锚链接方式实现回到顶部效果,是最简便的一种方式,即将标签a中的href属性值设置为#即可:,便可实现一键回到顶部效果.为了提供较好的用户体验,这里使用js实现这个功能. 功能点 1.返回顶 ...
最新文章
- Weblogic12C 集群实现session同步
- 程序员or产品经理┃同是职场脱发人，光头何苦为难光头！
- 找到数组中第k小的值（利用快排的划分函数）
- 一篇文章学习Python中的多线程
- Linux连接xshell时连不上的问题【转载】
- Spring学习总结（10）——Spring JMS---三种消息监听器
- PHP性能调优，PHP慢日志---善用php-fpm的慢执行日志slow log，分析php性能问题
- 每日算法系列【LeetCode 128】最长连续序列
- 环信小程序 Demo源码发布，让你的小程序聊起来
- C语言字符串和数字转换函数大全
- 简仿Path的商店表情弹出模块
- windows7最简单最快速解决“此windows副本不是正版”（“This copy of Windows is not genuine”）方法
- 微信支付详细教程实战
- Proteus，keil5仿真运行stm32程序，流水灯详细教程
- python中文文本信息提取_PyMuPDF提取文本信息
- Tair存储引擎简单介绍以及常见API操作
- OHS 12C中导入第三方SSL证书
- 视频书单号到底好不好做，能不能赚钱？
- php 怎么验证邮箱验证码,PHP实现邮箱验证码验证功能
- note: This error originates from a subprocess, and is likely not a problem with pip.解决 python降版本tips