首页 / css知识

    jquery如何实现点击网页回到顶部效果?(图文+视频)

    作者:PHP中文网2018-10-13 13:53:48

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

    daa64b0b9aa586620603ed83a1d4e21.png

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

    4e31ed05ef0519ef96a5dbc8ce085c3.png

    注意:

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

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

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

    想要了解更多前端相关知识,可以关注PHP中文网jQuery视频教程或者 HTML视频教程CSS视频教程Bootstrap视频教程等等相关视频教程,欢迎大家参考学习!

    以上就是jquery如何实现点击网页回到顶部效果?(图文+视频)的详细内容,更多请关注php中文网其它相关文章!

PHP中文网

未登录