服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - 返回顶部按钮响应滚动且动态显示与隐藏

返回顶部按钮响应滚动且动态显示与隐藏

2021-03-31 15:48JS教程网 JavaScript

返回顶部功能在很多的网站上都有,判断滚动参数动态显示与隐藏,下面的示例很实用,喜欢的朋友可以收藏下

很多的网站上都有返回顶部功能,判断滚动参数动态显示与隐藏,比较适合初学者

?
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现动态的显示回到顶部与否</title>
<style>
/*返回顶部*/
.back_top {width:45px;height:45px;background:url(back_top_new.png) 0 0;position:fixed;left:50%;margin-left:500px;bottom:105px;display:none;}
.back_top:hover{background:url(images/back_top_new.png) 0 -46px;}
</style>
</head>
 
<body>
<a id="codetool">

延伸 · 阅读

精彩推荐