返回頂部寫法

摯愛無痕發表於2018-08-20

 

<!–JSP寫入 回到頂部–!>

<div style=”overflow: hidden;position: fixed;right: 10px;bottom: 20px;z-index: 10;”>
<div style=”overflow: hidden;”>
<div style=”padding-top:20px;padding-right:50px;padding-bottom:50px;”>
<a href=”#” style=”float: right;display:none” class=”btns maoDian” id=”goToTop” >回到頂部</a>
</div>
</div>
</div>

<!–js寫入–!>

$(function(){

//當滾動條的位置處於距頂部100畫素以下時,跳轉連結出現,否則消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$(“#goToTop”).fadeIn();
}
else
{
$(“#goToTop”).fadeOut();
}
});

//當點選跳轉連結後,回到頁面頂部位置

$(`#goToTop a`).click(function(){
$(`html,body`).animate({scrollTop:0},`slow`);
});

});

})

 

相關文章