介绍:
为了解决pc端的长篇博文方便操作,在小神器增加回到顶部和回到底部的按钮。
代码:
回到顶部
<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>
回到底部
$( 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);
});
});
回到某一个位置
var $objTr = $("#comments h2");//目标
var objTr = $objTr[0]; //转化为dom对象
$( "#comt").click( function () {
$("html,body").animate({scrollTop:objTr.offsetTop},"slow"); //定位tr
});