JavaScript實(shí)現(xiàn)網(wǎng)頁帶動畫返回頂部的方法詳解

更新時(shí)間：2022年08月11日 09:30:45 作者：camellia

這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)網(wǎng)頁帶動畫返回頂部的效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下

服務(wù)器由阿里云換到了騰訊云，我的代碼之前一直都是托管在git上的，但是搬家的時(shí)候，可能是著急了，之前有些新加的文件沒有托管到git上，所以，就丟了。

不過無所謂了，可以重新寫嘛。

之前博客的回到頂部功能是請之前的一位前端的同事幫忙寫的，這次打算自己嘗試一下。

返回頂部無非就是錨點(diǎn)。

第一個版本：

<body style="height:2000px;">
    <div id="topAnchor"></div>
    <a href="#topAnchor" rel="external nofollow"  style="position:fixed;right:0;bottom:0">回到頂部</a>
</body>

這個沒用js，單純的使用錨點(diǎn)試了一下，好用。

好用是好用，但是用戶體驗(yàn)不是很好，嗖的一下就回到頂部了。不好。

我不太喜歡使用jquery，不管坐什么都喜歡用原生，所以，我這里用原生JavaScript寫了一個帶動畫的，大概是這樣。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>返回頂部</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 2000px;
            width: 100%;
        }
        .to_top{
            width: 60px;
            height: 60px;
            bottom: 10%;
            right: 20px;
            font-size: 40px;
            line-height: 70px;
            border: none;
            background: rgba(0,0,0,0.2);
            cursor: pointer;
            opacity: 0;
            transition: all 1s;
            /*使點(diǎn)前標(biāo)簽始終置于最上層*/
            position: fixed;
            z-index: 99999;
        }
    </style>
</head>
<body>
    <div class="to_top">
        <img src="https://guanchao.site/uploads/gotop/timg.jpg" alt="" width="70;">
    </div>
    <script type="text/javascript">
        window.onscroll = function(){
            var timer = null;//時(shí)間標(biāo)識符
            var isTop = true;
            
            var obtn = document.getElementsByClassName('to_top')[0];
            obtn.onclick = function(){
                // 設(shè)置定時(shí)器
                timer = setInterval(function(){
                    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    //減小的速度
                    var isSpeed = Math.floor(-osTop/6);
                    document.documentElement.scrollTop = document.body.scrollTop = osTop+isSpeed; 
                    //判斷，然后清除定時(shí)器
                    if (osTop == 0) {
                        clearInterval(timer);
                    } 
                    isTop = true;//添加在obtn.onclick事件的timer中    
                },30);                          
            };
            //獲取頁面的可視窗口高度
            var client_height = document.documentElement.clientHeight || document.body.clientHeight;

            //在滾動的時(shí)候增加判斷,忘了的話很容易出錯
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (osTop >= client_height) {
                obtn.style.opacity = '1';
                }else{
                    obtn.style.opacity = '0';
                }         
                if(!isTop){
                    clearInterval(timer);
                }
                isTop = false;
            
        }
    </script>
</body>
</html>

以上代碼可以放到html文件中可以直接運(yùn)行。

代碼具體含義其中基本都有注釋。

有看不懂的地方，請自行百度。

方法補(bǔ)充

其實(shí)實(shí)現(xiàn)返回頂部效果的方法有很多，除了上文的方法，小編也為大家整理一些其他方法，感興趣的可以嘗試下

方法一

//頁面加載后觸發(fā)
window.onload = function(){
  var btn = document.getElementById('btn');
  var timer = null;
  var isTop = true;
  //獲取頁面可視區(qū)高度
  var clientHeight = document.documentElement.clientHeight;

  
  //滾動條滾動時(shí)觸發(fā)
  window.onscroll = function() {
  //顯示回到頂部按鈕
    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (osTop >= clientHeight) {
      btn.style.display = "block";
    } else {
      btn.style.display = "none";
    };
  //回到頂部過程中用戶滾動滾動條，停止定時(shí)器
    if (!isTop) {
      clearInterval(timer);
    };
    isTop = false;

  };

  btn.onclick = function() {
    //設(shè)置定時(shí)器
    timer = setInterval(function(){
      //獲取滾動條距離頂部高度
      var osTop = document.documentElement.scrollTop || document.body.scrollTop;
      var ispeed = Math.floor(-osTop / 7);
      
      document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
      //到達(dá)頂部，清除定時(shí)器
      if (osTop == 0) {
        clearInterval(timer);
      };
      isTop = true;
      
    },30);
  };
};

方法二

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>返回頂部效果</title>
     <style>
         .slider-bar {
             position: absolute;
             left: 47%;
             top: 300px;
             margin-left: 600px;
              45px;
             height: 130px;
             background-color: pink;
             cursor: pointer;
         }
         .w {
              1100px;
             margin: 10px auto;
         }
         .header {
             height: 150px;
             background-color: purple;
         }
         .banner {
             height: 250px;
             background-color: skyblue;
         }
         .main {
             height: 1000px;
             background-color: yellowgreen;
         }
         span {
             display: none;
             position: absolute;
             bottom: 0;
         }
     </style>
 </head>
 <body>
     <div class="slider-bar">
         <span class="goBack">返回頂部</span>
     </div>
     <div class="header w">頭部區(qū)域</div>
     <div class="banner w">banner區(qū)域</div>
     <div class="main w">主體部分</div>
 
     <script>
         // querySelector() 方法返回匹配指定選擇器（）的第一個元素，傳的必須是字符串
         var sliderbar = document.querySelector('.slider-bar');
         var banner = document.querySelector('.banner');
         var bannerTop = banner.offsetTop; // banner模塊距離頂部的長度
         var sliderbarTop = sliderbar.offsetTop - bannerTop; // 側(cè)邊欄固定后距離頂部的長度
 
         var main = document.querySelector('.main');
         var goBack = document.querySelector('.goBack');
         var mainTop = main.offsetTop;  // main模塊距離頂部的長度
         
         // scroll 屏幕發(fā)生滾動事件時(shí)執(zhí)行
         document.addEventListener('scroll', function() {
             if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滾上去的距離
                 sliderbar.style.position = 'fixed';   // 當(dāng)用戶滾到banner模塊時(shí)使側(cè)邊欄變?yōu)楣潭顟B(tài)
                 sliderbar.style.top = sliderbarTop + 'px'; 
             } else {
                 sliderbar.style.position = 'absolute';
                 sliderbar.style.top = '300px';
             }
             
             if(window.pageYOffset >= mainTop) {    // 當(dāng)用戶滾到main模塊時(shí)顯示返回頂部按鈕
                 goBack.style.display = 'block';
             } else {
                 goBack.style.display = 'none';
             }
             
         });
         sliderbar.addEventListener('click', function() {
             animate(window, 0);
         })
 
         /* 動畫函數(shù)：
          *  obj 做動畫的對象（這里就是指window）
          *  target 目標(biāo)位置（頂部）
          *  callback 回調(diào)函數(shù)（沒有傳參的話就不執(zhí)行）
          */
         function animate(obj, target, callback) {
             clearInterval(obj.timer);  // 先清除定時(shí)器，保證只有一個定時(shí)器在執(zhí)行，以免出現(xiàn)bug
             obj.timer = setInterval(function() {
                 // window.pageYOffset距離頂部的距離（是負(fù)的）
                 var step = (target - window.pageYOffset) / 10;  // step步長（讓頁面速度逐漸變慢的滑動上去）
                 step = step > 0 ? Math.ceil(step) : Math.floor(step); // step并不總是整數(shù)。大于零向上取整,小于零向下取整
                 if(window.pageYOffset == target) {  // 當(dāng)頁面回到頂部后(即動畫執(zhí)行完) 清除定時(shí)器
                     clearInterval(obj.timer);
                     //  判斷是否傳了回調(diào)函數(shù)
                     /* if(callback) { 
                         callback();
                     } */
                     // 可以簡寫為下邊這種。 &&是短路運(yùn)算符，存在callback（即第一個式子為true）時(shí)才會繼續(xù)執(zhí)行callback()
                     callback && callback();
                 }
                 // window.scroll(x, y) 滾動到文檔特定位置
                 window.scroll(0, window.pageYOffset + step);
             }, 15);
         }
     </script>
 </body>
 </html>

到此這篇關(guān)于JavaScript實(shí)現(xiàn)網(wǎng)頁帶動畫返回頂部的方法詳解的文章就介紹到這了,更多相關(guān)JavaScript動畫返回頂部內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: