介紹
爲了解決pc端的長篇博文方便操作,在小神器增加回到頂部和回到底部的按鈕。
說明
本文標題:js實現回到頂部和回到底部
本文鏈接:https://blog.xygeng.cn/?id=148
作者授權:除特別說明外,本文由 庚哥哥 原創編譯並授權 木芽博客 刊載發佈。
版權聲明:本文不使用任何協議授權,您可以任何形式自由轉載或使用。
代碼
回到頂部
<body style="height:2000px;">
<button id="test" style="position:fixed;right:0;bottom:0">回到頂部</button>
<script>
test.onclick = function(){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
</script>
</body>
回到底部
script type="text/javascript">// <![CDATA[
$( function () {
var speed = 1000;//自定義滾動速度
//回到頂部
$( "#toTop").click( function () {
$( "html,body").animate({ "scrollTop" : 0 }, speed);
});
//回到底部
var windowHeight = parseInt($("body").css("height" ));//整個頁面的高度
$( "#toBottom").click(function () {
$( "html,body").animate({ "scrollTop" : windowHeight }, speed);
});
});
// ]]></script>
回到某一個位置
var $objTr = $("#comments h2");//目標
var objTr = $objTr[0]; //轉化爲dom對象
$( "#comt").click( function () {
$("html,body").animate({scrollTop:objTr.offsetTop},"slow"); //定位tr
});