这是简单的效果图。

（实现楼层间的跳跃，主要依靠的是 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网页返回顶部和楼层跳跃的实现原理的更多相关文章

  1. 手机端网页返回顶部js代码

    <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" cont ...

  2. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  3. 基于原生js的返回顶部组件，兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  4. js网页返回页面顶部的小方法

    咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...

  5. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  6. javascript实现网页返回顶部功能

    在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的. 有些网站使用锚链接来实现页面内容的跳转,但这种效果的 ...

  7. 网页返回顶部之animate方法

    点击返回顶部按钮,页面滑动形式回到顶部! HTML代码: <div id="ctop">回到<br>顶部</div> CSS代码: #ctop{ ...

  8. 原生JS实现返回顶部和滚动锚点

    ;(function (window,doc,undefined) { function rollingAnchor(){ this.timer =''; } rollingAnchor.protot ...

  9. js平滑返回顶部代码

    随便找的一个,使用时直接调用gotoTop就行了,至于调速度之类的我没试,有兴趣的自己试试吧 注意:如果你想改变这个函数的名称千万不要忘了要同时改变第37行的那个gotoTop /** * JavaS ...

随机推荐

  1. iBATIS使用$和#的一些理解

    我们在使用iBATIS时会经常用到#这个符号. 比如: sql 代码 select * from member where id =#id# 然后,我们会在程序中给id这个变量传递一个值,iBATIS ...

  2. 《编程珠玑(第2版)》【PDF】下载

    <编程珠玑(第2版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382225 内容简介 书的内容围绕程序设计人员面对的一系列实 ...

  3. [100个改变摄影的伟大观念].（英）玛瑞恩.高清扫描版.pdf

    下载地址  :https://u253469.ctfile.com/fs/253469-229765365

  4. c#创建access数据库和数据表

      由于在程序中使用了ADOX,所以先要在解决方案中引用之,方法如下: 解决方案资源管理器(项目名称)-->(右键)添加引用-->COM--> Microsoft ADO Ext. ...

  5. Java I/O---Reader & Writer(字符流)

    1.Reader & Writer 当我们初次看见Reader和Writer类时,可能会以为这是两个用来替代InputStream和OutputStreamt的类,但实际上并非如此. 尽管一些 ...

  6. SQL数据库语句

    on xxx --主文件 ( name=‘xxxx’, fliename='里面写文件放的路径\xxxx.mdf', size=xxMB, filegrowth=xxMB, maxsize=xxMB ...

  7. 原来你是这样的JAVA[02]-包、传参、构造器

    一.包(package) 在java程序中,一个java源文件称为编译单元,以.java后缀命名.编译单元内可以有一个public类,类名必须与文件名相同.注意:每个编译单元只能有一个public类. ...

  8. xampp的安装和配置

    这几天一直在做一个网站,客户要求要用PHP修改WordPress的themes,目的是交付完成后,客户自己管理方便. 以前从没有涉及过PHP,用的是jsp,但是,既然已经选择接受,就只能让自己去适应客 ...

  9. jQuery 实现无限任意添加下拉菜单

    新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦 我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...

  10. HTTP状态码、请求方法、响应头信息

    HTTP状态码 当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应 ...