js之返回网页顶部
程序员文章站
2022-06-24 14:38:42
目标效果：浏览网页过程中，滑动滚轮，显示返回顶部按钮，点击返回顶部后，返回网页顶端。 代码如下： ......
目标效果：浏览网页过程中，滑动滚轮，显示返回顶部按钮，点击返回顶部后，返回网页顶端。
代码如下：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>title</title>
6
7 </head>
8 <body onscroll="r()">
9 <div style="height: 1000px;background-color:lavender"></div>
10 <a id="hide" href="#" style="display: none;height: 48px;width: 38px;background-color: bisque;position: fixed;bottom: 10px;right: 10px" onclick="f();">返回顶部</a>
11 <script type="text/javascript">
12 function r() {
13 document.getelementbyid('hide').style.display = '';
14 };
15 function f() {
16 document.body.scrolltop = 0;
17 };
18 </script>
19 </body>
20 </html>
上一篇： 全方面了解和学习PHP框架
下一篇： 深入剖析z-index属性