首页 > 代码库 > js實現點擊:回到頂部

js實現點擊:回到頂部

2024-09-02 07:24:35   218人阅读

“回到頂部”功能可以使用a標籤的錨點實現，也可以使用js的onclick事件實現。

關鍵步驟：1.html+css佈局

               2.滾動條到滾動到一定高度時候，顯示按鈕“回到頂部”（若還沒有到一定高度，則隱藏）

               3.點擊按鈕實現回到頂部：scrollTop = 0;

具體如下：

 

html:實現頁面效果

<body class="container">
    
    <div class="top">
           hello: top
          <input id="text_input"  style="margin-top:150px; " type="text" value="0" />
    </div>

    <div class="con"> 
              中間有很多內容
    </div>
 

     <!-- 定位的元素  position:fixed; --> 
    <div id="hiddenShow" class ="divHidden">
           <input type="button" style="color:Red; font-weight:bold "  id="cgotop" value="回到頂部" />
    </div>
</body>


css:

      #hiddenShow {
        position:fixed; /*定位在页面的底部*/
        bottom:0;
        border:30px solid red;
      
        }
    .divHidden{ 
        display:none;
    }
    .divShow{ 
        display:block;
    }

js:

  window.onload = function () {
            
            // 顯示或者隱藏Div:回到頂部
            window.onscroll = function () {
                var div_hidden = document.getElementById("hiddenShow");
                var t = document.documentElement.scrollTop || document.body.scrollTop; // IE: document.documentElement.scrollTop
                if (t > 100) {
                    div_hidden.className = "divShow";
                }
                else {
                    div_hidden.className = "divHidden";
                }
                // 顯示滾動條高度：
                var text_input = document.getElementById("text_input");
                text_input.value = "顯示滾動條高度：" + t;  //    alert(t);
            };

            //點擊回到頂部
            var cgotop = document.getElementById("cgotop");
            cgotop.onclick = function () {
                document.getElementsByTagName(‘body‘)[0].scrollTop = 0;
                document.getElementsByTagName(‘html‘)[0].scrollTop = 0;  // jq:     $(‘body,html‘).animate( { scrollTop: 0 },   1000  );   
                return false;
            };
        };

 

類似效果圖:點擊回到頂部

技术分享

js實現點擊:回到頂部


联系
我们