帶有動態效果得返回頂部
阿新 • • 發佈:2018-12-31
之前做“返回頂部”,一直都是無動態效果的。瞬間就回到了頂部。這次寫一個帶有動態效果的。也就是利用animate方法來實現。下面是具體程式碼。
HTML:
<body>
<div class="content">
<p>這是測試文件</p>
...
<p>這是測試文件</p>
</div>
<button class="toTopBtn" >回到頂部</button>
</body>
JS:
<script type="text/javascript">
/*ie9以上(包括)*/
$(function(){
$(document).scroll(function(){
//頁面滾動,按鈕出現
$(".toTopBtn").show();
//如果滾動到最上面,按鈕將會消失
if($(document).scrollTop() == 0) {
$(".toTopBtn").hide();
}
});
$(".toTopBtn" ).click(function(){
//此處無動態效果,瞬間回到頂部
//$(document).scrollTop(0);
//此處利用animate動畫新增動態效果
$('html').animate({scrollTop:0},300);
});
});
</script>
CSS:
<style type="text/css">
.toTopBtn {
display: none ;
position: fixed;
bottom: 30px;
right: 20px;
width: 50px;
height: 50px;
font-size: 12px;
text-align: center;
background-color: #0033FF;
cursor: pointer;
font-weight: 600;
border-radius: 8px;
}
</style>