JS——给网页添加返回顶部按钮
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS——给网页添加返回顶部按钮相关的知识，希望对你有一定的参考价值。
在页面右下方添加一个返回顶部按钮，当页面滑到一定位置时，按钮出现，否则消失，默认隐藏
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回顶部</title> 6 <style type="text/css"> 7 .content{ width: 100%;height: 500px; background:green; overflow: hidden; } 8 #back-to-top{ position: fixed; right: 50px;bottom: 10%; width: 44px;height: 44px; text-align: center; display: none; cursor: pointer;} 9 #back-to-top a:hover{ color: #fff; } 10 </style> 11 <script src="js/jquery-1.7.2.min.js"></script> 12 </head> 13 <body> 14 <div class="content"></div> 15 <div class="content"></div> 16 <div class="content"></div> 17 <div id="back-to-top"><a href="#" title="返回顶部"><img src="images/top.png" width="44" height="44"></a></div> 18 <script> 19 $(function(){ 20 $(‘#back-to-top‘).hide(); 21 $(function(){ 22 $(window).scroll(function(){ 23 if($(window).scrollTop()>100){ 24 $(‘#back-to-top‘).fadeIn(100); 25 }else{ 26 $(‘#back-to-top‘).fadeOut(100); 27 } 28 }); 29 $(‘#back-to-top‘).click(function(){ 30 $(‘body,html‘).animate({scrollTop:0},300) 31 return false; 32 }) 33 }) 34 }) 35 </script> 36 </body> 37 </html>
.fadeIn() 设置图标淡出延迟， .fadeOut()设置图标淡入（隐藏）延迟。这里要注意两者不要弄反了，初学者往往容易因为out和in的字面意思，弄反该方法的意思。
在给该图标添加一个click事件。
以上是关于JS——给网页添加返回顶部按钮的主要内容，如果未能解决你的问题，请参考以下文章
js : 怎么设置网页滚动条超过800px后，显示“返回顶部”的按钮？
JS怎样实现点击按钮时页面缓缓向上或下移动，类似网页底部的“返回顶部”，但是很缓慢