这是简单的效果图。

（实现楼层间的跳跃，主要依靠的是 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. Elastic 技术栈之 Logstash 基础

    title: Elastic 技术栈之 Logstash 基础 date: 2017-12-26 categories: javatool tags: java javatool log elasti ...

  2. iOS通用链接（Universal Links）突然点击无效的解决方案

    接上文<微信中通过页面(H5)直接打开本地app的解决方案>已经把iOS搞定并且已经正常能跑了,突然就再也用不了了... 问题描述 测试告诉我,如果从微信打开App之后,点击App右上角的 ...

  3. CSS3 文字与字体相关样式

    给文字添加阴影 文字换行 客户端文字 font-size-adjust属性 给文字添加阴影-text-shadow属性 text-shadow:length length length color 前 ...

  4. oracle自动备份_expdp_Linux

    [oracle@hbsjxtdb1 ~]$ crontab -e 0 4 * * * /backup/script/backupexpdp.sh [oracle@hbsjxtdb1 ~]$ cront ...

  5. centos 打包RPM包 ntopng

    需要在centos7上,将ntopng及其依赖的包一起打包成rpm包,了解centos7打包. 1.执行: yum -y install rpmdevtools  安装rpm工具 2.接下来执行:rp ...

  6. Git详解之三：Git分支

    Git 分支 几乎每一种版本控制系统都以某种形式支持分支.使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作.在很多版本控制系统中,这是个昂贵的过程,常常需要创建一个源代码目录的 ...

  7. C#语言和SQL Server第十章笔记

    第十章 :使用关键字模糊查询 笔记 一:使用关键字 :LIKE  BETWEEN  IN进行模糊查询 通配符:  一类字符,代替一个或多个真正的字符 与LIKE关键字一起使用 通配符: 解释 实例 符 ...

  8. 第一本的java 的小总结

    1.Java常见的注释有哪些,语法是怎样的? 1)单行注释用//表示,编译器看到//会忽略该行//后的所文本  2)多行注释/* */表示,编译器看到/*时会搜索接下来的*/,忽略掉/* */之间的文 ...

  9. 浏览器根对象window之screen

    1. screen 1.1 availHeight/Width screen.availWidth返回浏览器窗口可占用的水平宽度(单位:像素). screen.availHeight返回浏览器窗口在屏 ...

  10. 【CSS初识】

    一.CSS是什么? CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距.高度.宽度.背景图像.高级定位等方面. HTML用于结构化内容:CSS用于格式化结构化的内容. ...