您现在的位置是：网站首页> 编程资料编程资料

JavaScript实现网页带动画返回顶部的方法详解_javascript技巧_

2023-05-24 322人已围观

简介 JavaScript实现网页带动画返回顶部的方法详解_javascript技巧_

服务器由阿里云换到了腾讯云，我的代码之前一直都是托管在git上的，但是搬家的时候，可能是着急了，之前有些新加的文件没有托管到git上，所以，就丢了。

不过无所谓了，可以重新写嘛。

之前博客的回到顶部功能是请之前的一位前端的同事帮忙写的，这次打算自己尝试一下。

返回顶部无非就是锚点。

第一个版本：


回到顶部

这个没用js，单纯的使用锚点试了一下，好用。

好用是好用，但是用户体验不是很好，嗖的一下就回到顶部了。不好。

我不太喜欢使用jquery，不管坐什么都喜欢用原生，所以，我这里用原生JavaScript写了一个带动画的，大概是这样。

返回顶部

以上代码可以放到html文件中可以直接运行。

代码具体含义其中基本都有注释。

有看不懂的地方，请自行百度。

方法补充

其实实现返回顶部效果的方法有很多，除了上文的方法，小编也为大家整理一些其他方法，感兴趣的可以尝试下

方法一

//页面加载后触发 window.onload = function(){ var btn = document.getElementById('btn'); var timer = null; var isTop = true; //获取页面可视区高度 var clientHeight = document.documentElement.clientHeight; //滚动条滚动时触发 window.onscroll = function() { //显示回到顶部按钮 var osTop = document.documentElement.scrollTop || document.body.scrollTop; if (osTop >= clientHeight) { btn.style.display = "block"; } else { btn.style.display = "none"; }; //回到顶部过程中用户滚动滚动条，停止定时器 if (!isTop) { clearInterval(timer); }; isTop = false; }; btn.onclick = function() { //设置定时器 timer = setInterval(function(){ //获取滚动条距离顶部高度 var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed = Math.floor(-osTop / 7); document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed; //到达顶部，清除定时器 if (osTop == 0) { clearInterval(timer); }; isTop = true; },30); }; };

方法二

返回顶部效果返回顶部
头部区域
banner区域
主体部分

到此这篇关于JavaScript实现网页带动画返回顶部的方法详解的文章就介绍到这了,更多相关JavaScript动画返回顶部内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：JS实现刷新网页后之前浏览位置保持不变示例详解_JavaScript_

下一篇：vue在标签中如何使用(data-XXX)自定义属性并获取_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

JavaScript实现网页带动画返回顶部的方法详解_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢