Rumah > Artikel > hujung hadapan web > 在JS中如何实现回到顶部效果
这篇文章主要为大家详细 介绍了JS实现带动画的回到顶部效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现带动画的回到顶部效果的具体代码,供大家参考,具体内容如下
实现功能:滚动到页面某一个高度的时候,回到顶部按钮出现。点击之后回到网页顶部,按钮隐藏。
代码如下,jQuery引用的是百度CDN的,因此整段代码复制下来后在浏览器运行即可。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实现回到顶部功能</title> </head> <style> * { padding: 0; margin: 0; } .gotop { display: none; position: fixed; bottom: 50px; right: 50px; width: 40px; height: 40px; padding: 5px; background-color: #F00; color: #FFF; text-align: center; cursor: pointer; } </style> <script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script> <body> <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> <p>这是一段文字</p><br /><br /><br /><br /><br /><br /> <p id="goTop" class="gotop"> <p>回到</p> <p>顶部</p> </p> </body> <script> function goTop() { $(window).scroll(function() { var $scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //兼容浏览器 if($scrollTop > 100) { //滚动高度可调 $("#goTop").show(); } else { $("#goTop").hide(); }; }) $("#goTop").on("click", function() { $("body").stop().animate({ scrollTop: 0 }); }) } goTop(); </script> </html>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
Atas ialah kandungan terperinci 在JS中如何实现回到顶部效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!