一、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; }; };
類似效果圖:點擊回到頂部
