HTML代碼
<p id="back-to-top"><a href="#top">返回頂部</a></p>
CSS代碼
p#back-to-top{
position:fixed;
display:none;
bottom:100px;
right:80px;
}
js代碼
$(function(){
//當滾動條的位置處於距頂部100像素以下時,跳轉鏈接出現,否則消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(1500);
}
else
{
$("#back-to-top").fadeOut(1500);
}
});
//當點擊跳轉鏈接后,回到頁面頂部位置
$("#back-to-top").click(function(){
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, 100);//動畫效果
return false;
}
$('body').animate({ scrollTop: 0 }, 100);
return false;
});
});
});
記得要引用jQuery文件
