JavaScript实现返回顶部按钮
程序员文章站
2022-06-23 12:48:55
本文实例为大家分享了javascript实现返回顶部按钮的具体代码,供大家参考,具体内容如下1.先搭架子a { text-decoration: none; }...
本文实例为大家分享了javascript实现返回顶部按钮的具体代码,供大家参考,具体内容如下
1.先搭架子
a { text-decoration: none; } body { height: 5000px; } .backtotop { position: fixed; bottom: 80px; right: 80px; width: 80px; height: 80px; background-color: #ccc; font-size: 20px; text-align: center; padding-top: 12px; box-sizing: border-box; cursor: pointer; color: #000; /* 先隐藏按钮 */ /*display: none;*/ }
<a href="javascript:;" class="backtotop" id="backtotop">返回<br>顶部</a>
2.逻辑部分
当鼠标点击“返回顶部”按钮时,则会以每50毫秒的周期以一定“速度”返回到顶部,回到顶部之后则要进行清除,否则将出现只要一往下拉页面就会自动返回顶部的现象
在这里就要用到两个方法一个是 setinterval,一个是clearinterval,前者是设置定时器,后者为清除定时器
在这里要注意一点的是,为了不引起冲突,在设置定时器之前要进行“设表先关”
最后为了增加用户的体验感,我们需要设计成,当前如果是在顶部时,那么“返回顶部”按钮就会自动隐藏;当前如果不在顶部时,“返回顶部”按钮就显示
.backtotop { /* 先隐藏按钮 */ display: none; }
(function() { // 1.拿到需要操作的元素 let obackbtn = document.queryselector("#backtotop"); // 2.监听网页的滚动 window.onscroll = function() { // 获取滚动出去的距离 let offsety = getpagescroll().y; // console.log(offsety); // 判断是否需要显示回滚按钮 if (offsety >= 200) { obackbtn.style.display = "block"; } else { obackbtn.style.display = "none"; } } let timerid = null; // 3.监听回滚按钮的点击 obackbtn.onclick = function() { //设表先关,防止定时器冲突 clearinterval(timerid); //设置定时器 timerid = setinterval(function() { let begin = getpagescroll().y; //当前位置 let target = 0; //目标位置 let step = (target - begin) * 0.3; begin += step; //判断是否结束 if (math.abs(math.floor(step)) <= 1) { //清除定时器 clearinterval(timerid); // window.scrollto(x, y); // x表示让网页在水平方向滚动到什么位置 // y表示让网页在垂直方向滚动到什么位置 window.scrollto(0, 0); return; } window.scrollto(0, begin); }, 50); }; function getpagescroll() { let x, y; if (window.pagexoffset) { x = window.pagexoffset; y = window.pageyoffset; } else if (document.compatmode === "backcompat") { x = document.body.scrollleft; y = document.body.scrolltop; } else { x = document.documentelement.scrollleft; y = document.documentelement.scrolltop; } return { x: x, y: y } } })();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
-
ASP.NET jQuery 实例之通过控件hyperlink实现返回顶部效果
-
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
-
微信公众号开发 实现点击返回按钮就返回到聊天界面
-
JS中如何实现点击a标签返回页面顶部的问题
-
jquery左边浮动到一定位置时显示返回顶部按钮
-
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
-
简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示
-
JavaScript开发中如何使用jQuery实现返回顶部
-
JavaScript在form表单中使用button按钮实现submit提交方法