这是简单的效果图。

（实现楼层间的跳跃，主要依靠的是 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. MPSOC之1——overview、开发板、工具

    1.MPSOC overview MPSOC是xilinx公司推出的新一代集成SOC,比ZYNQ厉害了一个等级. 熟悉一个芯片,不能一头扎进详细的数据手册,应该从overview开始大概了解,然后浏览 ...

  2. 应用activeMQ消息中间件同步索引库

    mq是一个消息服务器: 安装包内置了tomcat,直接登录访问,登录:http://ip:8161/admin/    (相当于dubbo的moniter监控中心) admin admin传统串行化, ...

  3. docker commit使用

    我们运行的容器可能在镜像的基础上做了一些修改,有时候我们希望保存起来,封装成一个更新的镜像 docker自己提供的有commit功能 我们以centos为例,现在我们要在一个裸的centos上面安装v ...

  4. sudo，visudo

    visudo修改/etc/sudoers文件 用户名/%组名 主机名/主机别名/网段=(身份)命令 若(ALL)为空则为所有身份,即包含root身份 user1 ALL=/sbin/shutdown ...

  5. Hive实际应用小结

    1.简介 Hive是数据仓库平台,构建在Hadoop之上用来处理结构化数据.Hive是一个SQL解析引擎,能够将SQL语句转化成MapReduce作业并在Hadoop上执行,从而使得查询和分析更加方便 ...

  6. three.js实现3D模型展示

    由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家 先看看效果: three.js整体来说 不是很难 只要你静下心来研究研究 很快就会上手的 首先我们在页面上需要创建一个能 ...

  7. Func和Action委托简单用法

    Func和Action类是特殊的类型,它们允许你在不必指定自定义委托类型的情况下,去使用委托.在整个.NET框架中都可以使用它们.例如,在我们考察并行计算时,你也会看到这两个类的示例. 上面一段文字是 ...

  8. openstack操作之二 restful api

    Restful api 是openstack各服务调用的接口,简单理解为可以通过网络去调用的函数.postman是一款前端调用工具,测试后端接口的时候往往是使用该工具去验证.在openstack的使用 ...

  9. centos yum源配置 与yum配置文件

    参考博客 http://www.cnblogs.com/mchina/archive/2013/01/04/2842275.html 1.centos . yum配置文件在目录 /etc/yum.re ...

  10. 消息队列一：为什么需要消息队列(MQ)？

    为什么会需要消息队列(MQ)? #################################################################################### ...