jquery如何实现点击网页回到顶部效果？（图文+视频）

互联网 18-10-13

本篇文章主要给大家介绍如何用jquery代码实现网页回到顶部的效果。

我们在浏览各大网站页面时，想必大家肯定都遇到过，当阅览一个长页面时，拉到下面部分会出现类似回到顶部的按钮特效吧。

这种点击回到顶部的功能特效，可以很大程度上提高用户体验。那么实现这样的功能也是非常简单的。

下面我们就通过简单的代码示例，为大家介绍用jquery实现点击回到顶部的功能方法。

<!DOCTYPE html> <html> <head>     <title>回到顶部特效</title>     <meta charset="UTF-8">     <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>     <style>         body {             text-align: center;         }         h1 {             width: 1200px;             height: 1500px;             background: #eee;             margin: 30px auto;         }         a {             text-decoration: none;             color: #fff;         }         p#back {             text-align: center;             position: fixed;             bottom: 100px;             right: 60px;             background: #000;             border-radius: 3px;             height: 50px;             width: 80px;             display: none;         }     </style> </head> <body> <h1>网页内容</h1> <a href=""><p id="back"><br> 返回顶部</p></a> </body> <script>     // 文档就绪     $(function () {         // 获取浏览器窗口         $(window).scroll(function () {             // 获取浏览器滚动条距离顶部的高度             if ($(window).scrollTop() > 150) {                 // 设置按钮出现                 $('#back').fadeIn(1000)             } else {                 // 设置按钮消失                 $('#back').fadeOut(1000)             }         })     }) </script> </html>

此段代码中我们主要引用了一个jquery的线上库，并写了一些简单的HTML页面和js代码判断，当滚动条距顶部的高度大于150的话，则设置按钮出现，相反则设置按钮隐藏。最后通过浏览器访问，效果如下：