jQuery之回到顶部

实现回到顶部的功能，根据学了元素滚动实现，温习知识点。

做之前先理清一下步骤和思路：

1、获得页面的滚动长度

var $page = $("html,body");
var distance = $("html").scrollTop()+$("body").scrollTop();

2、设置总时间

var time = 500;

3、设置间隔时间

var intervalTime = 50;

4、使用循环定时器不断滚动

5、/到达顶部, 停止定时器

//获得每次滑动的距离
var interdistance = distance/(time/intervalTime);
var inervaltimer = setInterval(function(){
distance -= interdistance;
if (distance<=0) {
distance = 0;
// 到达顶部, 停止定时器
clearInterval(inervaltimer);
}
$page.scrollTop(distance);
},intervalTime)

 

大概的设计应该差不多都是这样子，接下来的就是不同的场景举一反三

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #to_top{
                width: 30px;
                height: 40px;
                background: blue;
                font: 15px/20px arial;
                position: fixed;
                top: 700px;
                left: 1850px;
                text-align: center;
                color: #fff;
                cursor: pointer;
            }
        </style>
    </head>
    <body style="height: 2000px;">
        <div id="to_top">返回顶部</div>
        <script type="text/javascript" src="../../../js/jquery-1.10.1.js" ></script>
        <script type="text/javascript">
            $("#to_top").click(function(){
                //设置则使用$("html,body")
                //获取的话，则使用分开的形式
                //$("html,body").scrollTop(0);
                var $page = $("html,body");
                //获得滑动的总长度
                var distance = $("html").scrollTop()+$("body").scrollTop();
                //滑动所需要的时间
                var time = 500;
                //间隔时间
                var intervalTime = 50;
                // 使用循环定时器不断滚动
                //获得每次滑动的距离
                var interdistance = distance/(time/intervalTime);
                var inervaltimer = setInterval(function(){
                    distance -= interdistance;
                    if (distance<=0) {
                        distance = 0;
                        // 到达顶部, 停止定时器
                        clearInterval(inervaltimer);
                    }
                    $page.scrollTop(distance);
                },intervalTime)
                
                
            })
        </script>
    </body>
</html>

 

posted @ 2018-07-30 11:20  你若精彩，蝴蝶自来  阅读(426)  评论(1)  编辑  收藏  举报