一直都是在PC端寫返回頂部的按鈕请梢，今天的項(xiàng)目是移動(dòng)端赠尾，頁面內(nèi)容比較多，也有滾動(dòng)頂部的功能溢陪，于是一開始用了原生的的寫法萍虽，沒有用睛廊，經(jīng)過調(diào)試形真，滾動(dòng)時(shí)獲取不到滾動(dòng)的高度。接著又換了一個(gè)gototop.js插件超全，還是無效咆霜，同樣獲取不到距頂部的高度。
用了2個(gè)小時(shí)調(diào)試了這個(gè)移動(dòng)端返回頂部的按鈕事件嘶朱，最后經(jīng)調(diào)試發(fā)現(xiàn)是$(window).scroll（）和 $(window).scrollTop()高度不變蛾坯，但是 $('body').scroll（）、$('body').scrollTop()高度會(huì)隨著滾動(dòng)變化疏遏，body換成window 解決了脉课，
下面附上代碼救军，為下次使用方便：
html部分:
<!-- 滾動(dòng)到頂部 -->
<div class="goTop" id="js-go_top"><img src="./images/icon_top.png" alt="回到頂部"></div>
css部分:
/* 公共的浮窗 滾動(dòng)到頂部 */
.goTop {
position: fixed;
right: 1%;
bottom: 10%;
width: 1rem;
height: 1rem;
z-index: 999;
}
.goTop > img {
width: 1rem;
height: 1rem;
cursor: pointer;
}
js部分:
// 滾動(dòng)到頂部
$(function() {
$('.goTop').hide();
$('body').scroll(function() {
if ($('body').scrollTop() >= 600) {
$('.goTop').fadeIn(300);
} else {
$('.goTop').fadeOut(300);
}
});
$('.goTop').click(function() {
$('html,body').animate({ scrollTop: '0px' }, 200);
});
});
這個(gè)一個(gè)簡單實(shí)用的小demo,可以直接復(fù)制使用哦，一起加油哦
