这是简单的效果图。

（实现楼层间的跳跃，主要依靠的是 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. 【Web性能进阶】1.无线网络基础

    一.无所不在的连接 针对不通的使用场景,无线网络技术有很多种. 鉴于无线网络技术如此多样,笼统地概括所有无线网络的性能优化手段是不可能的.好在大多数无线技术的原理都是相通的,衡量性能的指标和约束条件也 ...

  2. idea 导入项目后 有的项目目录结构不展开解决办法

    如图:可能会出现这中国情况. 解决办法: 1.一般项目导入完成后,但是目录不展开, 2.出现这种情况一般情况下, 关闭idea close idea ,然后重新导入一遍就OK.

  3. jsp中EL表达式不起作用的问题1

    问题:在jsp页面中使用el表达式取值,取不到值,但是使用jsp中嵌套java代码可以取到值,对应代码如下: 解决: 只要在 jsp中 头文件中写上 : <%@page isELIgnored= ...

  4. 工作随笔——jasypt-spring-boot使用

    最近有一个项目,要求对各种配置文件中的数据进行加密.so,let`s do it. Maven依赖 <dependency> <groupId>com.github.ulise ...

  5. 《大型网站技术架构：核心原理与案例分析》【PDF】下载

    <大型网站技术架构:核心原理与案例分析>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062557 内容简介 本书通过梳理大型网站 ...

  6. Python网络爬虫与信息提取（二）—— BeautifulSoup

    BeautifulSoup官方介绍: Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式. 官方 ...

  7. async和enterproxy控制并发数量

    聊聊并发与并行 并发我们经常提及之,不管是web server,app并发无处不在,操作系统中,指一个时间段中几个程序处于已经启动运行到完毕之间,且这几个程序都是在同一处理机上运行,并且任一个时间点只 ...

  8. Xamarin android如何反编译apk文件

    Xamarin android 如何反编译 apk文件 这里推荐一款XamarinAndroid开发的小游戏,撸棍英雄,游戏很简单,的确的是有点大.等一下我们来翻翻译这个Xamarin Android ...

  9. SpringMVC底层数据传输校验的方案

    团队的项目正常运行了很久,但近期偶尔会出现BUG.目前观察到的有两种场景:一是大批量提交业务请求,二是生成批量导出文件.出错后,再执行一次就又正常了. 经过跟踪日志,发现是在Server之间进行jso ...

  10. Io 异常: The Network Adapter could not establish the connection

    新接触一个项目,导入源码,在本地启动的时候后台报了一个错误: Could not discover the dialect to use. java.sql.SQLException: Io 异常: ...