JavaScript实现网页带动画返回顶部的方法详解
更新时间：2022年08月11日 09:30:45 作者：camellia
这篇文章主要为大家详细介绍了如何利用JavaScript实现网页带动画返回顶部的效果，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
服务器由阿里云换到了腾讯云，我的代码之前一直都是托管在git上的，但是搬家的时候，可能是着急了，之前有些新加的文件没有托管到git上，所以，就丢了。
不过无所谓了，可以重新写嘛。
之前博客的回到顶部功能是请之前的一位前端的同事帮忙写的，这次打算自己尝试一下。
返回顶部无非就是锚点。
第一个版本：
<body style="height:2000px;">
<div id="topAnchor"></div>
<a href="#topAnchor" rel="external nofollow" style="position:fixed;right:0;bottom:0">回到顶部</a>
</body>这个没用js，单纯的使用锚点试了一下，好用。
好用是好用，但是用户体验不是很好，嗖的一下就回到顶部了。不好。
我不太喜欢使用jquery，不管坐什么都喜欢用原生，所以，我这里用原生JavaScript写了一个带动画的，大概是这样。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>返回顶部</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 2000px;
width: 100%;
}
.to_top{
width: 60px;
height: 60px;
bottom: 10%;
right: 20px;
font-size: 40px;
line-height: 70px;
border: none;
background: rgba(0,0,0,0.2);
cursor: pointer;
opacity: 0;
transition: all 1s;
/*使点前标签始终置于最上层*/
position: fixed;
z-index: 99999;
}
</style>
</head>
<body>
<div class="to_top">
<img src="https://guanchao.site/uploads/gotop/timg.jpg" alt="" width="70;">
</div>
<script type="text/javascript">
window.onscroll = function(){
var timer = null;//时间标识符
var isTop = true;
var obtn = document.getElementsByClassName('to_top')[0];
obtn.onclick = function(){
// 设置定时器
timer = setInterval(function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
//减小的速度
var isSpeed = Math.floor(-osTop/6);
document.documentElement.scrollTop = document.body.scrollTop = osTop+isSpeed;
//判断，然后清除定时器
if (osTop == 0) {
clearInterval(timer);
}
isTop = true;//添加在obtn.onclick事件的timer中
},30);
};
//获取页面的可视窗口高度
var client_height = document.documentElement.clientHeight || document.body.clientHeight;
//在滚动的时候增加判断,忘了的话很容易出错
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop >= client_height) {
obtn.style.opacity = '1';
}else{
obtn.style.opacity = '0';
}
if(!isTop){
clearInterval(timer);
}
isTop = false;
}
</script>
</body>
</html>以上代码可以放到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);
};
};方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>返回顶部效果</title>
<style>
.slider-bar {
position: absolute;
left: 47%;
top: 300px;
margin-left: 600px;
45px;
height: 130px;
background-color: pink;
cursor: pointer;
}
.w {
1100px;
margin: 10px auto;
}
.header {
height: 150px;
background-color: purple;
}
.banner {
height: 250px;
background-color: skyblue;
}
.main {
height: 1000px;
background-color: yellowgreen;
}
span {
display: none;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
<script>
// querySelector() 方法返回匹配指定选择器（）的第一个元素，传的必须是字符串
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
var bannerTop = banner.offsetTop; // banner模块距离顶部的长度
var sliderbarTop = sliderbar.offsetTop - bannerTop; // 侧边栏固定后距离顶部的长度
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop; // main模块距离顶部的长度
// scroll 屏幕发生滚动事件时执行
document.addEventListener('scroll', function() {
if(window.pageYOffset >= bannerTop) { // window.pageYOffset 屏幕被滚上去的距离
sliderbar.style.position = 'fixed'; // 当用户滚到banner模块时使侧边栏变为固定状态
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
if(window.pageYOffset >= mainTop) { // 当用户滚到main模块时显示返回顶部按钮
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
});
sliderbar.addEventListener('click', function() {
animate(window, 0);
})
/* 动画函数：
* obj 做动画的对象（这里就是指window）
* target 目标位置（顶部）
* callback 回调函数（没有传参的话就不执行）
*/
function animate(obj, target, callback) {
clearInterval(obj.timer); // 先清除定时器，保证只有一个定时器在执行，以免出现bug
obj.timer = setInterval(function() {
// window.pageYOffset距离顶部的距离（是负的）
var step = (target - window.pageYOffset) / 10; // step步长（让页面速度逐渐变慢的滑动上去）
step = step > 0 ? Math.ceil(step) : Math.floor(step); // step并不总是整数。大于零向上取整,小于零向下取整
if(window.pageYOffset == target) { // 当页面回到顶部后(即动画执行完) 清除定时器
clearInterval(obj.timer);
// 判断是否传了回调函数
/* if(callback) {
callback();
} */
// 可以简写为下边这种。 &&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()
callback && callback();
}
// window.scroll(x, y) 滚动到文档特定位置
window.scroll(0, window.pageYOffset + step);
}, 15);
}
</script>
</body>
</html>到此这篇关于JavaScript实现网页带动画返回顶部的方法详解的文章就介绍到这了,更多相关JavaScript动画返回顶部内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
看到这种百叶窗效果的动画，以为是用flash做的，下面通过本文给大家介绍基于JavaScript实现百叶窗动画效果，需要的朋友参考下吧2016-02-02
浏览器兼容的JS写法总结，涵盖的内容很全面，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要是对Javascript中难以理解的11个问题进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
大家做小程序项目的时候肯定会遇到数据对接需求,下面这篇文章主要给大家介绍了关于微信小程序网络请求模块封装的具体实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要给大家介绍了关于如何利用JavaScript控制元素(标签)的显示与隐藏的相关资料,JavaScript有多种方式可以实现,文中介绍了三种方法以及区别,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了JavaScript 预解释,包含带var关键字预解释、带function关键字预解释,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了小程序Scroll-view上拉滚动刷新数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
向导可以让你的网站用户快速上手使用你的web应用，提高网站的吸引力。向导一般分为好几个步骤，每个步骤收集一些数据，并且支持退回功能，所有步骤完成后可以得到每一步的收集结果。这里给大家展示一种比较通用，灵活且简单的向导框架。2011-08-08
js去除空格的方法有很多，本文整理了12种比较实用方法在此与大家分享下2013-11-11
这篇文章主要介绍了JS折半插入排序算法,以完整实例形式较为详细的分析了JavaScript实现折半插入排序的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
最新评论