用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)
|
相关推荐
javaee/javaweb常用jar包,亲测可用,导入到java工程中即可使用
javaee/javaweb常用jar包,亲测可用,导入到java工程中即可使用
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
javaee/javaweb常用jar包,亲测可用,导入到java工程中即可使用
javaee/javaweb常用jar包,亲测可用,导入到java工程中即可使用
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
本项目是课程设计课程实验的demo,内含源码和说明书,可以自己修改
循环小组作业.cpp
本项目是课程设计课程实验的demo,内含源码和说明书,可以自己修改
Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
# 分布式链路追踪_skywalking_学习(1)
javaee/javaweb常用jar包,亲测可用,导入到java工程中即可使用
基于matlab实现文档+程序NSGA-II多目标优化的matlab代码.rar
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
AspectJ Java方面的集合,以促进面向方面的编程模式、日志记录、缓存验证等
linux常用命令大全
期末考试.py
解密制度通常需要结合加密算法和密钥管理方法来确保解密操作的安全性和有效性
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。