jQuery之回到頂部

你若精彩，蝴蝶自來發表於2018-07-30
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>

 

相關文章