今天業(yè)務(wù) 需求中 增加一個回到頂部的小組件默色。那我們直接進(jìn)入正題。
1.最快的 方法就是在頁面頂部加一個a 標(biāo)簽狮腿，使用錨點(diǎn)直接跳轉(zhuǎn)到頂部腿宰。這樣寫的缺點(diǎn)是沒有很好的頁面體驗(yàn)效果，頁面會直接切到頂部缘厢。
/* 寫在頁面頂部的a標(biāo)簽酗失，由于里面沒有文本元素，所以不占用布局空間*/
<a name="Top"></a>
/* 跳轉(zhuǎn)按鈕部分*/
<a href="#Top">回到頂部</a>
2.第二種是 使用 插件scrollToTop 插件昧绣。看了下插件捶闸，感覺很麻煩夜畴，可能是它有處理兼容相關(guān)的問題。不過還是不太建議使用删壮。
3.好東西都是放到最后的贪绘，這是最后投入實(shí)際使用的一個方法。
/* html 部分,可以加在頁面的 任何獨(dú)立部分 */
<div class="backTop">
回到頂部
</div>
/* css 樣式部分*/
div.backTop{
width:40px;
height:40px;
border:1px solid #bbb;
cursor:pointer;
}
/* js 部分*/
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()>600){
$("div.backTop").fadeIn(1500);
}else{
$("div.backTop).fadeOut(1500);
}
});
$("div.backTop").click(function(){
$("body.html").animate({scrollTop:0},500);
return false;
})
})
