js网页返回顶部和楼层跳跃的实现原理
这是简单的效果图。
（实现楼层间的跳跃，主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上。）
说楼层跳跃前，先温习下，一般网页在高度较大时，都会在页面的底部位置放个放回顶部的按钮或图片，一点击便有如做火箭般瞬间回到页面的顶部（说时迟，那时快，一句 btn.onclick = function(）{window.scrollTo(0,0)} 就搞定了）。
但是这种瞬间就回到顶部的效果，略显突然，不符合人体工程学，如果要先快后慢，如坐电梯一般回到顶部，该如何实现呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#but{
position:fixed;
bottom:20px;
right:20px;
display:none;
}
</style>
</head>
<body>
<button id="but">返回顶部</button>
<p>两情若是长久时，又岂在朝朝暮暮</p>
<p>两情若是长久时，又岂在朝朝暮暮</p>
<!--省略若干个 -->
</body>
<script>
var weizhi = 0;
var timer = null;
var target = 0;
var but = document.getElementById("but"); window.onscroll = function(){
weizhi = scroll().top;
if(weizhi>1000){
but.style.display = "block";
}else{
but.style.display = "none";
}
} but.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
var step = Math.floor((target - weizhi)/10);
weizhi = weizhi + step;
window.scrollTo(0,weizhi);
if(weizhi == 0){
clearInterval(timer);
}
},30);
}
function scroll(){
return {
"top":window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left":window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
</script>
</html>
如何缓动，第一次移动的距离大点，之后依次递减，整体上给人的感觉就是移动先是很快，然后逐渐变慢。
var step = Math.floor((target - weizhi)/10);
设置步长，因为目标是回到顶部，所以target的值为0。两者间距离的十分之一作为步长。
weizhi = weizhi + step;
每一次当前的位置都加上了步长，（这里step为负数），所以当前位置就会越来越接近顶部。
了解了底部缓动返回顶部，楼层间的跳跃道理是一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
list-style:none;
}
body,html{
height:100%;
}
ul{
height:100%;
}
ul li{
height:100%;
}
ol{
position:fixed;
top:100px;
left:30px;
}
ol li{
width:50px;
height:30px;
border:1px solid #aaa;
margin-top:10px;
line-height:30px;
text-align:center;
cursor:pointer;
}
</style>
</head>
<body>
<ul>
<li>袜子</li>
<li>裤子</li>
<li>鞋子</li>
<li>帽子</li>
<li>包包</li>
</ul>
<ol>
<li>袜子</li>
<li>裤子</li>
<li>鞋子</li>
<li>帽子</li>
<li>包包</li>
</ol>
</body>
<script>
var timer;
var target;
var leader=0;
var ul = document.getElementsByTagName("ul")[0];
var ol = document.getElementsByTagName("ol")[0];
var ulLi = ul.children;
var olLi = ol.children;
var arrColor = ["pink","blue","green","red","yellow"];
for(var i=0;i<ulLi.length;i++){
ulLi[i].style.background = arrColor[i];
olLi[i].style.background = arrColor[i];
olLi[i].index = i; //重点，为元素增加一个index属性，之后再点击时，可以通过获取这个属性来判断是点击了那个li元素
olLi[i].onclick = function(){
clearInterval(timer);
target = ulLi[this.index].offsetTop; //通过ol中的li元素的index属性判断对应的ul的li元素距离顶部的距离。
timer = setInterval(function(){
var step = (target - leader) / 10 ;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
window.scrollTo(0,leader);
if(Math.abs(target - leader) <= Math.abs(step)){
window.scrollTo(0,target);
clearInterval(timer);
}
},30);
}
}
window.onscroll=function(){
leader = scroll().top;
} function scroll(){
//将获取scrollTop和scrollLeft的属性进行封装
return {
"top":window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left":window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
} </script>
</html>
js网页返回顶部和楼层跳跃的实现原理的更多相关文章
- 手机端网页返回顶部js代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- 基于原生js的返回顶部组件，兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- js网页返回页面顶部的小方法
咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...
- javascript实现网页返回顶部功能
在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的. 有些网站使用锚链接来实现页面内容的跳转,但这种效果的 ...
- 网页返回顶部之animate方法
点击返回顶部按钮,页面滑动形式回到顶部! HTML代码: <div id="ctop">回到<br>顶部</div> CSS代码: #ctop{ ...
- 原生JS实现返回顶部和滚动锚点
;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...
- js平滑返回顶部代码
随便找的一个,使用时直接调用gotoTop就行了,至于调速度之类的我没试,有兴趣的自己试试吧 注意:如果你想改变这个函数的名称千万不要忘了要同时改变第37行的那个gotoTop /** * JavaS ...
随机推荐
- 基于python的web应用开发-添加关注者
社交web允许用户之间相互联系. 例如: 关注者.好友.联系人.联络人或伙伴. 记录两个用户之间的定向联系,在数据库查询中也要使用这种联系. 一.论数据库关系 一对多关系 数据库使用关系建立记录之间的 ...
- SpringBoot Test集成测试
1.pom,文件添加相关依赖 如何测试SpringBoot的请求?使用spring-boot-starter-test这个包即可完成测试,SpringBoot项目为什么需要测试本章不作过多说明,重点放 ...
- SQL Server-聚焦ROW_NUMBER VS TOP N性能
前言 抱歉各位,从八月份开始一直在着手写EntityFramework 6.x和EntityFramework Core 2.0的书籍写作,所以最近一直遗漏了对博客的管理,后面会着手于写SQL Ser ...
- Python进阶之迭代器和生成器
可迭代对象 Python中任意的对象,只要它定义了可以返回一个迭代器的__iter__方法,或者定义了可以支持下标索引的__getitem__方法,那么它就是一个可迭代对象.简单来说,可迭代对象就是能 ...
- Swift3.0 UITextField
import UIKit private var textfieldd = UITextField() class TextFieldViewController: UIViewController, ...
- SpringMVC随笔记录
在web.xml里可以配置webapp的默认首页,格式如下: <welcome-file-list> <welcome-file>index.html</welcome- ...
- 查找 GPU 计算能力
你能在这里找到你的 GPU 的计算能力: https://en.wikipedia.org/wiki/CUDA#Supported_GPUs
- springboot学习（一）——helloworld
以下内容,如有问题,烦请指出,谢谢 springboot出来也很久了,以前零散地学习了不少,不过很长时间了都没有在实际中使用过了,忘了不少,因此要最近准备抽时间系统的学习积累下springboot,给 ...
- 串口调试者v2.1------开源c#串口调试工具
第一步:上图 第二步:上代码 >>>>>>>>>>>源代码下载<<<<<<<<< ...
- Xamarin.android Activity动画切换效果实现
http://blog.csdn.net/esunshine1985/article/details/44302903 1.在Resources--values下新建styles.xml,添加内容如下 ...