本文实例为大家分享了js实现带有动画返回顶部的具体代码，供大家参考，具体内容如下
1、滑动鼠标往下滑动，侧边栏跟着往上移动，当到达某一个位置的时候，侧边栏停止移动；鼠标往上，则侧边栏往下-停止
2、当鼠标继续下滑到某一个位置，“返回顶部”几个字会弹出此处如果点击“返回顶部”，则立刻到了顶部
3、到达顶部位置效果
4、源代码
|
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 版心 */
.w {
width: 980px;
margin: 0 auto;
}
/* 头部样式 */
.head {
height: 200px;
background-color: teal;
}
/* 内容区域样式 */
.banner {
height: 450px;
background-color: red
}
/* sidebar是侧边栏 */
.sidebar {
position: absolute;
top: 300px;
right: 250px;
display: inline-block;
width: 40px;
height: 80px;
background-color: cyan;
text-align: center;
}
/* 侧边栏 “返回顶部”字体 */
.sidebar span {
display: none;
font-size: 14px;
cursor: pointer;
}
/* 主体div样式 */
.zhuti {
height: 300px;
background-color: violet;
}
/* 底部样式 */
.footer {
height: 700px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="sidebar">广告<br><br>
<span id="returns">返回顶部</span>
</div>
<div class="head w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="zhuti w">主体区域</div>
<div class="footer w">尾部区域</div>
<script>
// js代码部分
var sidebar = document.queryselector('.sidebar')
var banner = document.queryselector('.banner')
var bannertop = banner.offsettop;
// 获取 主体 区域的事件源
var zhuti = document.queryselector('.zhuti');
var span = document.queryselector('span');
var zhutitop = zhuti.offsettop;
// console.log(bannertop) // 200
// banner.offesttop 就是被卷去头部的大小 一定要写到滚动的外面
// 当我们侧边栏固定定位之后应该变化的数值
var sidebartop = sidebar.offsettop - bannertop;
document.addeventlistener('scroll', function () {
// console.log(window.pageyoffset)
if (window.pageyoffset >= bannertop) {
sidebar.style.position = 'fixed';
sidebar.style.top = sidebartop + 'px';
} else {
sidebar.style.position = 'absolute';
sidebar.style.top = 300 + 'px';
}
// 当到底主题区域的时候,显示span的内容
if (window.pageyoffset >= zhutitop) {
span.style.display = 'block';
} else {
span.style.display = 'none';
}
})
// 封装了一个动画js文件
function animation(obj, target, fn1) {
// console.log(fn1);
// fn是一个回调函数，在定时器结束的时候添加
// 每次开定时器之前先清除掉定时器
clearinterval(obj.timer);
obj.timer = setinterval(function () {
// 步长计算公式 越来越小
// 步长取整
var step = (target - obj.pageyoffset) / 10;
step = step > 0 ? math.ceil(step) : math.floor(step);
if (obj.pageyoffset == target) {
clearinterval(obj.timer);
// 如果fn1存在，调用fn
if (fn1) {
fn1();
}
} else {
// 每30毫秒就将新的值给obj.left
window.scroll(0, obj.pageyoffset + step);
}
}, 30)
}
// 获取返回顶部的事件 点击触发
var returns = document.queryselector('#returns');
returns.addeventlistener('click', function () {
// alert(111);
// window.scroll(x,y) 可以返回顶部
// window.scroll(0,0);
animation(window, 0)
})
</script>
</body>
</html>
|
5、喜欢记得点击，关注，收藏噢，不喜勿喷~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/mxjwxhn/article/details/107870250