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});

jquery实现回到顶部和回到底部相关推荐

html锚点链接回到顶部,回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器...
插件描述:回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器回到顶部和回到底部在当前的网页中应用时相当广泛的为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动那么我们就要 ...
jq怎么回到顶部和回到尾部_回到学校系列为孩子们提供开放资源
jq怎么回到顶部和回到尾部全球各地的孩子们都回到学校了! 有没有比免费和开放的教育资源和工具更好的帮助他们成长并充分利用学校的方法? Opensource.com将于9月8日至19日举办为期两周的开 ...
html页面刷新回到顶部_html回到页面顶部
js隐藏与显示回到顶部按钮现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个"回到顶部"的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适 ...
HTML学习笔记之二（回到顶部与回到底部）
回到顶部回到底部回到顶部的俩种方式一.使用js [javascript] view plaincopy $('html, body').animate({ scrollTop: 0 }, 'fa ...
vue中平滑地回到顶部，回到底部
监听的滚动条需要平稳滑动,所以设置几个值,一个定时器.一个定义的scrollTop,方便后续操作 data(){scrollTop: 0,timer: null,scrollBottom: 0,tim ...
html页面刷新回到顶部_HTML5 回到顶部
图片: html 回到顶部 css *{ margin: 0; padding: 0; } .box { width:1000px; margin: 0 auto; } #btn { width:40 ...
回到顶部和回到底部动画
$("#dwn").click(function() {$('html,body').animate({scrollTop: $(document).height()}, 600) ...
浏览器刷新页面后回到顶部_JavaScript仿知乎回到顶部功能
一般的网站都有个回到顶部,回到顶部又有多种方法可以实现, 方法1: 在css中添加 html {scroll-behavior: smooth; } 然后在回到顶部按钮上加一个a标签,herf属性写顶 ...
微信小程序自定义回到顶部
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.自定义回到顶部按钮二.使用步骤 1.第一步获取屏幕被卷去多少距离 2.进行判断,例如我需要屏幕滚到大于600的时 ...
回到顶部和返回首页jquery插件
打造最全的CMS类教程聚合! 第一种方法:在网页<body></body>之间插入:  <div id="full&quo ...

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

jquery实现回到顶部和回到底部相关推荐

最新文章

热门文章