jquery如何实现点击网页回到顶部效果？

本篇文章主要给大家介绍如何用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的话，则设置按钮出现，相反则设置按钮隐藏。最后通过浏览器访问，效果如下：

然后我们拖动滚动条往下，会缓慢出现回到顶部的按钮，效果如下图：

注意：

fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。（本例中，参数设为1000毫秒，表示选定元素的淡入过渡时间为1000毫秒，如果设为0，则会立即出现被选元素。）

fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。（参数同上）

本篇文章就是关于jquery实现网页回到顶部的效果方法介绍，简单易懂，希望对需要的朋友有所帮助！

想要了解更多前端相关知识，可以关注编程之家jQuery视频教程或者 HTML视频教程，CSS视频教程、Bootstrap视频教程等等相关视频教程，欢迎大家参考学习！

以上就是jquery如何实现点击网页回到顶部效果？的详细内容，更多请关注编程之家其它相关文章！

相关推荐