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实现返回顶部按钮
本文实例为大家分享了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: cente
-
js实现带有动画的返回顶部
本文实例为大家分享了js实现带有动画返回顶部的具体代码,供大家参考,具体内容如下 1.滑动鼠标往下滑动,侧边栏跟着往上移动,当到达某一个位置的时候,侧边栏停止移动:鼠标往上,则侧边栏往下-停止 2.当鼠标继续下滑到某一个位置,"返回顶部"几个字会弹出此处如果点击"返回顶部",则立刻到了顶部 3.到达顶部位置效果 4.源代码 <!DOCTYPE html> <html lang="en"> <head> <
-
一个简单的弹性返回顶部JS代码实现介绍
昨天做了一个这样的功能,贴出来参考. HTML/JS/CSS代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
-
JS返回顶部实例代码
本文实例为大家分享了JS返回顶部实例代码,供大家参考,具体内容如下 html/css部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="返回顶部效果.js"></script> <style&g
-
js实现返回顶部效果
话不多说,请看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
基于Javascript实现返回顶部按钮
一个网页内容一多, 就会分屏显示数据, 如果屏目很多, 用户访问的数据已经到了页面的底部, 这时候返回到顶部也是需要一点时间. 这样对用户体验来说, 可能就稍微逊了一点. 所以页面数据多的网页, 现在都会用一个"返回顶部"按钮来快速跳转到网页的顶部. 那现在我们就来实现这么一个功能. 这个页面我们就不写什么数据, 直接就加入一个a标签来作为返回顶部的按钮, 并给他一个class名称:top. <a href="#" class="top"&
-
JavaScript实现网页带动画返回顶部的方法详解
服务器由阿里云换到了腾讯云,我的代码之前一直都是托管在git上的,但是搬家的时候,可能是着急了,之前有些新加的文件没有托管到git上,所以,就丢了. 不过无所谓了,可以重新写嘛. 之前博客的回到顶部功能是请之前的一位前端的同事帮忙写的,这次打算自己尝试一下. 返回顶部无非就是锚点. 第一个版本: <body style="height:2000px;"> <div id="topAnchor"></div> <a href=
-
JavaScript中数组去重常用的五种方法详解
目录 1.对象属性(indexof) 2.new Set(数组) 3.new Map() 4.filter() + indexof 5.reduce() + includes 补充 原数组 const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; 1.对象属性(indexof) 利用对象属性key排除重复项 遍历数组,每次判断新数组中是否存在该属性,不存在就存储在新数组中 并把数组元素作为key,最后返
-
利用win10自带虚拟机hyper-v安装centos7方法详解
一.安装win10企业版自带虚拟机 hyper-v 1.控制面板-->程序和功能-->启用或关闭Windows功能 勾上 hyper-v 确定就ok了 2.安装成功后会发现在 左下角"开始"菜单里的"Windows 管理工具" 中出现"hyper-v管理器" 打开hyper-v管理器,首先新建"虚拟交换机" 以便虚拟系统访问网络. 虚拟交换机 创建完成后,接下来我们创建 虚拟机. 这边根据需要选择第一代还是第二代.
-
对Python发送带header的http请求方法详解
简单的header import urllib2 request = urllib2.Request('http://example.com/') request.add_header('User-Agent', 'fake-client') response = urllib2.urlopen(request) print request.read() 包含较多元素的header import urllib,urllib2 url = 'http://example.com/' headers
-
JavaScript实现生成动态表格和动态效果的方法详解
今天上午完成了Vue实现一个表格的动态样式,那么JavaScript代码能不能实现同样的效果呢?这样也可以学习一下JavaScript的语法,晚上试了一下,完全可以,效果一模一样. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8">
-
SpringBoot统一返回格式的方法详解
目录 前言 1. 直接返回结果 2. 约定返回格式 3. 返回统一格式结果 4. 切片封装统一格式 编写注解 编写ControllerAdvice 见证奇迹的时刻到了 5. 自定义返回格式 场景1:返回成功时code为200 场景2:自定义返回格式 前言 目前很多项目都是前后端分离,前后端会事先约定好返回格式.那么后端如何做,才能优雅的返回统一格式呢,接下来,请大家跟着我,一步步来实现. 1. 直接返回结果 先看一下最基本的例子,直接将结果原封不动返回: @Data @AllArgsConstr
-
Javascript获取图片原始宽度和高度的方法详解
前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法. 如下: <img id="img" src="1.jpg"> <script type="text/javascript"> var img
-
JavaScript获取网页的宽高及如何兼容详解
很多场景下会需要获取当前网页的宽高来达到一些效果,但是获取网页的宽高这里面还是有一点(hen duo)坑的,这里我进行了总结和详解,若有补充欢迎评论补充~ 方式一:window.innerWidth / window.innerHeight 这种方式只支持IE9以及以上版本的浏览器 网页高度,打开F12控制台当然高度会不同 方式二:document.documentElement.clientWidth console.log(document.documentElement); console
-
原生JS检测CSS3动画是否结束的方法详解
本文实例讲述了原生JS检测CSS3动画是否结束的方法.分享给大家供大家参考,具体如下: 不知道大家在做网页的时候有没有碰到这种情况:当你使用CSS3的动画属性时,想要在动画结束后添加一系列操作,但往往这些操作可能会发生在与动画同时出现或者是在动画还没结束时就发生了. 针对这种情况我们会使用js来监听动画是否结束即它的style的transition属性是否为transitionend;下面我们通过一个简单的例子来理解一下我这句话的含义: 代码如下: <!DOCTYPE html> <ht
-
JavaScript动态检测密码强度原理及实现方法详解
本文实例讲述了JavaScript动态检测密码强度原理及实现方法.分享给大家供大家参考,具体如下: 在注册账户,设置密码时,会出现密码强度动态检测,网上看了一些帖子,大多只写了具体的实现过程,而没有对原理的分析过程.下面着重讲一下其原理. 原理分析 通常实现密码强度动态判断有两种方案实现: 正则.但其效率低一点,难度也大一些. 字符串,函数和运算符. 这里用第二种方案,但是如何判断一个密码串是强还是弱呢? 一般我们的密码会设置为数字.字母(大小写).特殊符号三类. 强:密码串包含其中三种或以上