jquery实现回到顶部和回到底部

最新推荐文章于 2023-01-09 16:53:02 发布

XY笔记

最新推荐文章于 2023-01-09 16:53:02 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/qq321772514/article/details/83901577

版权

介绍

为了解决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
 });

XY笔记

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery实现回到顶部和回到底部

介绍为了解决pc端的长篇博文方便操作，在小神器增加回到顶部和回到底部的按钮。说明本文标题：js实现回到顶部和回到底部本文链接：https://blog.xygeng.cn/?id=148作者授权：除特别说明外，本文由庚哥哥原创编译并授权木芽博客刊载发布。版权声明：本文不使用任何协议授权，您可以任何形式自由转载或使用。代码回到顶部<body sty...
复制链接

扫一扫