首页 > 其他分享> > JQuery实现“回到顶部”

JQuery实现“回到顶部”

2021-01-08 20:29:47 作者：互联网

用jQuery实现回到顶部功能

通过jQuery完成一个网页滚动回到顶端的功能：
完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            position: relative;
            height: 3000px;
            /*线性渐变/径向渐变*/
            background: linear-gradient(to bottom,yellow,orange);
        }
        .back-top{
            position: fixed;
            right: 40px;
            bottom: 40px;
            width: 26px;
            height: 62px;
            background: url("../img/rocket.png") no-repeat;
            transition: all .5s;
            display: none;
        }
        .back-top:hover{
            /*sprite图：精灵图*/
            background-position-y: -62px;
        }
    </style>
</head>
<body>
    <div class="back-top"></div>
    <h1>顶部区域</h1>
    <h2 style="position: absolute;bottom: 20px">底部区域</h2>
<script src="../jquery-1.11.3.js"></script>
<script>
    $(function () {
        //窗口滚动时间
        $(window).scroll(function () {
            //获取当前窗口与页面顶端距离
            let top = $(this).scrollTop();
            if(top>=300){
                //显示回到顶部的小火箭
                $('.back-top').slideDown(1000);
            }else{
                $('.back-top').fadeOut();
            }
        })
        //点击火箭回到顶部
        $('.back-top').click(function () {
            $('html,body').animate({
                scrollTop:0
            },'slow');
        })
    })
</script>
</body>
</html>

标签：JQuery,function,顶部,top,back,回到,background,position
来源： https://blog.csdn.net/PengZhen_/article/details/112383186