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 ...
随机推荐
- 自学Zabbix3.9.3-模板Templates-嵌套Nesting
自学Zabbix3.9.3-模板Templates-嵌套Nesting 嵌套是一个模板包含一个或多个其他模板的方法.可以在一个"嵌套"模板中将一些模板链接在一起.嵌套的好处在于,只 ...
- HTML5 Canvas：初始Canvas
Canvas ,HTML 5中引入它,可以做很多事情:画图.动画.游戏开发等等. Canvas 元素 Canvas 中文翻译为:画布. <canvas id=”yourCanvasId” wid ...
- 开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面
NanUI是什么 NanUI基于ChromiumFX项目进行开发,它能让你在你的Winform应用程序中使用HTML5/CSS3/Javascript等网页技术来呈现用户界面(类似Electron). ...
- 这么说吧，java线程池的实现原理其实很简单
好处 : 线程是稀缺资源,如果被无限制的创建,不仅会消耗系统资源,还会降低系统的稳定性,合理的使用线程池对线程进行统一分配.调优和监控,有以下好处: 1.降低资源消耗: 2.提高响应速度: 3.提高线 ...
- Idea中右边的maven projects窗口找不到了如何调出来
关于Idea中右边的maven projects窗口找不到了如何调出来? 具体的idea版本我不太清楚,我用的是2016版,其他版本应该也是一样的. 首先idea自带了maven控件,不像Eclip ...
- 【java提高】---数组增删 list删除 map删除
数组增删 集合删除 1.数组增删 package com.test; import java.util.List; import java.util.ArrayList; import java.ut ...
- 微信小程序教学第四章第三节（含视频）：小程序中级实战教程：详情-功能完善
详情 - 功能完善 本文配套视频地址: https://v.qq.com/x/page/f0555nfdi14.html 开始前请把 ch4-3 分支中的 code/ 目录导入微信开发工具 这一节中, ...
- 批量下载google 字体小工具
在项目开发中,我们经常用外国的框架,如bootstrap.nodejs.angularjs 时候经常要配套google 字体等资源, 但是由于国内网络原因,经常框架跑起来,网页在请求google 字体 ...
- 【java】打印一个对象即打印出该对象toString()返回值
public class TestToString { public static void main(String[] args){ Node node1=new Node("东邪&quo ...
- 使用puppet
首先配置一个默认文件 只是首次创建的时候才需要重启,后期不需要重启! [root@master manifests]# vim /etc/puppet/manifests/site.pp node d ...