js之返回网页顶部

2019-01-15 07:02:05来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

目标效果:浏览网页过程中,滑动滚轮,显示返回顶部按钮,点击返回顶部后,返回网页顶端。

代码如下:

 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>

 


原文链接:https://www.cnblogs.com/wenxianfeng/p/10259989.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript获取当前站点的域名和端口号

下一篇:一些小知识总结(虽然可能没用)