js 回到頂部

一、JQ实现

布局、滚动条长度到达某个值时出现‘返回顶部’、点击实现

1  <div class="go-top"  onclick=" scrolTolTop('0px', 300)" style="  position: fixed;z-index:9;
2     bottom: 50px;
3     right: 10px;
4     background: #FFF;  
5     display: none;
6     cursor: pointer;padding-left:4px;"  ><i class="fa fa-arrow-circle-up" aria-hidden="true"></i>返回顶部</div>

//返回顶部
function scrolTolTop(scrollTo, time) {
    var scrollFrom = parseInt(document.body.scrollTop);
    $(document).scrollTop(scrollTo)
}

$(document).ready(function () { }）

1  $(window).scroll(function () {
2             //返回顶部隐藏或显示
3             if ($(window).scrollTop() > 200) {
4                 $('.go-top').show();
5             } else {
6                 $('.go-top').hide();
7             }
8             
9         })

二、js

“回到頂部”功能可以使用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;
            };
        };

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