jquery實現回到頂部和回到底部

介紹

爲了解決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
 });

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章