本篇内容介绍了“怎么用JavaScript实现返回顶部按钮”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
思路:
首先先设计出其静态样式,这里主要利用固定定位,将其固定在页面底部的某一位置处
.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; }
其次就是设计逻辑部分:当鼠标点击“返回顶部”按钮时,则会以每20毫秒的周期以一定“速度”返回到顶部,回到顶部之后则要进行清除,否则将出现只要一往下拉页面就会自动返回顶部的现象;在这里就要用到两个方法一个是 setInterval,一个是clearInterval,前者是设置定时器,后者为清除定时器。
在这里要注意一点的是,为了不引起冲突,在设置定时器之前要进行“设表先关”
最后为了增加用户的体验感,我们需要设计成,当前如果是在顶部时,那么“返回顶部”按钮就会自动隐藏;当前如果不在顶部时,“返回顶部”按钮就显示
最后我们来看一下完整的案例:
<a href="javascript:;" class="backtotop" id="backtotop">返回<br>顶部</a>
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; }
<script> (function(){ //获得元素 var backtotop = document.getElementById('backtotop'); var timer; backtotop.onclick = function(){ //设表先关,防止定时器冲突 clearInterval(timer); //设置定时器 timer = setInterval(function(){ // 更改根元素的scrollTop元素值 //兼容性问题 var top = document.documentElement.scrollTop || document.body.scrollTop; top = top - 80; document.documentElement.scrollTop = top; document.body.scrollTop = top; //判断 if(top <= 0) { //关闭定时器 clearInterval(timer); } },20); }; //监听页面滚动 window.onscroll = function() { //得到卷动值 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.scrollY; //当页面没有卷动时,返回顶部 按钮就隐藏 if(scrollTop == 0) { backtotop.style.display = 'none'; }else { backtotop.style.display = 'block'; } }; })(); <script>
当页面没有发生卷动时:
当页面发生卷动时:
“怎么用JavaScript实现返回顶部按钮”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。