jQuery中頁面返回頂部的方法總結
阿新 • • 發佈：2019-03-24
高度 ber UNC 動畫 strong 感覺 場景 contain color
當頁面過長時，通常會在頁面下方有一個返回頂部的button，總結一下，大概三種實現方法，下面說下各方法及優缺點。
方法一 錨點定位
?| 1 |
<a href="#" class="top" id="top">返回頂部</a>
|
這種方法設置方便，但缺點是會刷新頁面（我是在同事的樂視手機上發現的）。
方法二 window.scrollTo(x,y)
?| 1 |
<a href="javascript:scrollTo(0,0)" class="top"id="top">返回頂部</a>
|
這種方法也很方便，並且不會刷新頁面，缺點是沒有滾動效果。
scrollTo接收的參數用來定位視口左上角在整個滾動內容區域的坐標，比如我設置scrollTo(100,100)，就是讓滾動內容的坐標（100,100）的點處在視口的左上角。
方法三 jQuery插件設置帶有動畫效果的滾動
原生方法
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
/* html部分 */
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<a href="javascript:;" class="top" id="top">返回頂部</a></body>
<style>
/* css部分 */
div {
height: 150px;
}
div:nth-child(odd) {
padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#8ae238;
}
div:nth-child(even) {
padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#66d9ef;
}
.top {
position: fixed;
right: 50px;
bottom: 50px;
display: block;
width: 50px;
height: 50px;
font-size: 20px;
display: none;
}
</style>
<script>
/* js代碼 */
var topBtn = document.getElementById(‘top‘);
// 獲取視窗高度
var winHeight = document.documentElement.clientHeight;
window.onscroll = function () {
// 獲取頁面向上滾動距離，chrome瀏覽器識別document.body.scrollTop，而火狐識別document.documentElement.scrollTop，這裏做了兼容處理
var toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 如果滾動超過一屏，返回頂部按鈕出現，反之隱藏
if(toTop>=winHeight){
topBtn.style.display = ‘block‘;
}else {
topBtn.style.display = ‘none‘;
}
}
topBtn.onclick=function () {
var timer = setInterval(function () {
var toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 判斷是否到達頂部，到達頂部停止滾動，沒到達頂部繼續滾動
if(toTop == 0){
clearInterval(timer);
}else {
// 設置滾動速度
var speed = Math.ceil(toTop/5);
// 頁面向上滾動
document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
}
},50);
}
</script>
|
大概的思路就是：
為window綁定scroll事件，監聽頁面滾動距離，當超過一屏高度時，顯示返回頂部的按鈕
為按鈕綁定點擊事件，返回頂部的方法就是獲取頁面滾動的距離，然後計算步長，這裏采用滾動距離除以5的方式，滾動速度由快到慢。這裏使用js定時器控制滾動的頻率，建議設置較小一點的值，如果時間間隔過大會有‘跳幀‘的感覺。
這種方法優點是有了動畫效果，只是實現起來比較麻煩，下面介紹一下jQuery方法。
jQuery特效方法
jQuery方法只是在js代碼部分不同，具體代碼如下
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script>
/* js代碼 */
$(window).on(‘scroll‘, function () {
// 判斷顯示還是隱藏按鈕
if($(this).scrollTop()>=$(this).height()){
$(‘#top‘).fadeIn(‘slow‘);
}else {
$(‘#top‘).fadeOut(‘slow‘);
}
});
$(‘#top‘).on(‘click‘,function () {
// 設置滾動動畫，這裏註意使用的是$(‘body‘)不是$(window)
$(‘body‘).animate({scrollTop:‘0‘},500);
});
</script>
|
jQuery方法的優點是方便，而且動畫效果比較流暢。
這裏需要註意設置animate方法時使用的是jQuery封裝的body對象而不是window對象，因為我們是要設置body的scrollTop屬性。
總結
三個方法各有優劣，不過總體來講，jQuery的方法更適合大多數場景。
jQuery中頁面返回頂部的方法總結