jQuery练习2--回到顶部

瞬间回到顶部:

$('html,body').scrollTop(0)

平缓回到顶部:

第一种方法:

使用自定义动画:

$('body,html').animate({scrollTop:0},300) //设置动画时长。让滚动条匀速回到顶部

第二种方法:

设置定时器,定义每一帧滚动条上移的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #to_top {
            width: 30px;
            height: 40px;
            font: 14px/20px arial;
            text-align: center;
            background: #06c;
            position: absolute;
            cursor: pointer;
            color: #000;
            top:1500px;
            right: 100px;
            z-index: 999;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script>
        $(function(){
            $('#to_top').click(function(){
               var distance = $('body').scrollTop() + $('html').scrollTop();//获取滚动条距离顶部的距离
                //如果diatance ==0 不执行
                //定义动画执行总时长 每一帧执行的时长
                //每一帧上移的距离 == 滚动条距离顶部的距离 / (动画执行的总时长 / 每一帧执行的时长)
                var time = 1000;
                var t = 10;
                var dis = distance / (time/t);
                var id = setInterval(function () {
                    distance -= dis;
                    if(distance <=0) 
                    {
                        distance = 0;
                        clearInterval(id);
                    }
                    $('html,body').scrollTop(distance);
                },t)
               console.log(distance);
            })
        })
    </script>
</head>
<body style="height: 1500px;">
<div id="to_top">返回顶部</div>
</body>
</html>
发布了119 篇原创文章 · 获赞 1 · 访问量 3976

猜你喜欢

转载自blog.csdn.net/weixin_42139212/article/details/103459639