仿淘宝回到顶部效果

需求：当滚动条到一定位置时侧边栏固定在某个位置，再往下滑动到某一位置时显示回到顶部按钮。点击按钮后页面会动态滑到顶部，速度由快到慢向上滑。

思路：

1、页面加载完毕才能执行js代码

　　可以将js代码写在最下边（本次回顶示例是用的这种）

　　想写在上边可以用下边这两种：

　　    ①window.onload = function() {...}

　　　②window.addEventListener('load', function() {...})

2、获取需要用到的元素

3、绑定滚动事件 scroll

　　当用户滚到banner模块时使侧边栏变为固定状态

if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滚上去的距离

    sliderbar.style.position = 'fixed';   // 当用户滚到banner模块时使侧边栏变为固定状态

    sliderbar.style.top = sliderbarTop + 'px';

} else {

    sliderbar.style.position = 'absolute';

    sliderbar.style.top = '300px';

}

当用户滚到main模块时显示返回顶部按钮

if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显示返回顶部按钮

     goBack.style.display = 'block';

} else {

    goBack.style.display = 'none';

}

4、绑定点击事件 click

　　点击返回顶部按钮后页面会动态滑到顶部，速度由快到慢向上滑动

sliderbar.addEventListener('click', function() {

    animate(window, 0);

})

5、关于动画函数 animate(obj, target, callback)

　　这里obj对象即是window；target目标位置即是0；callback是回调函数，没传参的话就可以忽略

　　设置一个定时器  setInterval();

　　声明一个step作为步长值，值为顶部位置到当前滚动条位置之差除以10（step会越来越小，滚动速度也就越来越慢，实现了滚动条的速度由快到慢的滑上去）

var step = (target - window.pageYOffset) / 10;

然而step并不总是整数，当step不是整数时可以让滚动条再往前走一丢丢。滚动条可以上下滑动，所以step可能大于零也可能小于零。大于零向上取整,小于零向下取整

step = step > 0 ? Math.ceil(step) : Math.floor(step);

window.scroll(x, y) 滚动到文档特定位置，定时器每次调用函数都会往上滑一点

window.scroll(0, window.pageYOffset + step);

判断动画是否执行完毕，如果执行完毕则关闭定时器  clearInterval();

if(window.pageYOffset == target) {  // 当页面回到顶部后(即动画执行完) 清除定时器

    clearInterval(obj.timer);

    //  判断是否传了回调函数

    /* if(callback) {

        callback();

    } */

    // 可以简写为下边这种。 &&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()

    callback && callback();

}

详细代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>返回顶部效果</title>

     <style>

         .slider-bar {

             position: absolute;

             left: 47%;

             top: 300px;

             margin-left: 600px;

             width: 45px;

             height: 130px;

             background-color: pink;

             cursor: pointer;

         }

         .w {

             width: 1100px;

             margin: 10px auto;

         }

         .header {

             height: 150px;

             background-color: purple;

         }

         .banner {

             height: 250px;

             background-color: skyblue;

         }

         .main {

             height: 1000px;

             background-color: yellowgreen;

         }

         span {

             display: none;

             position: absolute;

             bottom: 0;

         }

     </style>

 </head>

 <body>

     <div class="slider-bar">

         <span class="goBack">返回顶部</span>

     </div>

     <div class="header w">头部区域</div>

     <div class="banner w">banner区域</div>

     <div class="main w">主体部分</div>

     <script>

         // querySelector() 方法返回匹配指定选择器（）的第一个元素，传的必须是字符串

         var sliderbar = document.querySelector('.slider-bar');

         var banner = document.querySelector('.banner');

         var bannerTop = banner.offsetTop; // banner模块距离顶部的长度

         var sliderbarTop = sliderbar.offsetTop - bannerTop; // 侧边栏固定后距离顶部的长度

         var main = document.querySelector('.main');

         var goBack = document.querySelector('.goBack');

         var mainTop = main.offsetTop;  // main模块距离顶部的长度

         // scroll 屏幕发生滚动事件时执行

         document.addEventListener('scroll', function() {

             if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滚上去的距离

                 sliderbar.style.position = 'fixed';   // 当用户滚到banner模块时使侧边栏变为固定状态

                 sliderbar.style.top = sliderbarTop + 'px';

             } else {

                 sliderbar.style.position = 'absolute';

                 sliderbar.style.top = '300px';

             }

             if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显示返回顶部按钮

                 goBack.style.display = 'block';

             } else {

                 goBack.style.display = 'none';

             }

         });

         sliderbar.addEventListener('click', function() {

             animate(window, 0);

         })

         /* 动画函数：

          *  obj 做动画的对象（这里就是指window）

          *  target 目标位置（顶部）

          *  callback 回调函数（没有传参的话就不执行）

          */

         function animate(obj, target, callback) {

             clearInterval(obj.timer);  // 先清除定时器，保证只有一个定时器在执行，以免出现bug

             obj.timer = setInterval(function() {

                 // window.pageYOffset距离顶部的距离（是负的）

                 var step = (target - window.pageYOffset) / 10;  // step步长（让页面速度逐渐变慢的滑动上去）

                 step = step > 0 ? Math.ceil(step) : Math.floor(step); // step并不总是整数。大于零向上取整,小于零向下取整

                 if(window.pageYOffset == target) {  // 当页面回到顶部后(即动画执行完) 清除定时器

                     clearInterval(obj.timer);

                     //  判断是否传了回调函数

                     /* if(callback) {

                         callback();

                     } */

                     // 可以简写为下边这种。 &&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()

                     callback && callback();

                 }

                 // window.scroll(x, y) 滚动到文档特定位置

                 window.scroll(0, window.pageYOffset + step);

             }, 15);

         }

     </script>

 </body>

 </html>

JavaScript实现返回顶部效果的更多相关文章

  1. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  2. jq-animate实现返回顶部效果

    jq-animate实现返回顶部效果: <!doctype html> <html lang="en"> <head> <meta cha ...

  3. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  4. WEB返回顶部效果

    1. PC端页面返回顶部效果 1 $( window ).scroll(function(){ 2 if( $( window ).scrollTop() > 500 ){ // 当顶部的滚动距 ...

  5. 使用Javascript实现返回顶部功能。

    为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...

  6. JavaScript之返回顶部

    为了弄这个Hexo,今天又是坐在电脑面前待了一天( ⊙ o ⊙ ),老是出问题,在百度上也试验了很多方法,还是没弄好,诶...身心疲惫甚是乏累啊~~~ 算了,这个Hexo先不弄,还是安分点吧,在Hex ...

  7. 简约的返回顶部效果（jQuery）

    博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...

  8. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  9. JavaScript/Jquery返回顶部代码

    <!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...

随机推荐

  1. 洛谷P2858 【[USACO06FEB]奶牛零食Treats for the Cows】

    我们可以记录头和尾再加一个卖了的零食数目,如果头超过尾就return 0. 如果遇到需要重复使用的数,(也就是不为零的d数组)就直接return d[tuo][wei]. 如果没有,就取卖头一个与最后 ...

  2. nginx篇最初级用法之lnmp环境搭建

    这里m使用mariadb 需要下列软件列表: nginx mariadb 数据库客户端软件   mariadb-server   数据库服务器软件   mariadb-devel  其他客户端软件的依 ...

  3. 网络安全-主动信息收集篇第二章-三层网络发现之nmap和fping和Hping

    nmap IP  -sn nmap当目标IP在同一网段时,nmap会发送ARP包,当目标IP不在同一网段时nmap会发送ICMP的包. fping IP fping  -g 参数支持对IP地址起始和结 ...

  4. 「Luogu 2367」语文成绩

    更好的阅读体验 Portal Portal1: Luogu Description 语文老师总是写错成绩,所以当她修改成绩的时候,总是累得不行.她总是要一遍遍地给某些同学增加分数,又要注意最低分是多少 ...

  5. 通过cmd命令查看Python库、函数和模块的帮助文档与介绍

    dir函数式可以查看对象的属性 使用方法很简单,举os类型为例,在Python命令窗口输入 dir(‘os’) 即可查看os模块的属性 打开cmd命令窗口 输入python(注意:计算机需要有Pyth ...

  6. python多线程总结

    概述 进程与线程 进程:进程是资源(CPU.内存等)分配的最小单位,进程有独立的地址空间与系统资源,一个进程可以包含一个或多个线程 线程:线程是CPU调度的最小单位,是进程的一个执行流,线程依赖于进程 ...

  7. Hibernate中关于Query返回查询结果是类名的问题

    query.list返回的是一个装有类的信息的集合,而不装有数据库信息的集合.如下图 运行结果为:   因为得到的集合是类,所以要将list泛型设为那个类,并且将得到的集合进行.get(x).getx ...

  8. Nginx使用反向代理实现负载均衡

    Nginx使用反向代理实现负载均衡 yls 2019-9-20 简介 基于docker容器以及docker-compose,所以需要自学docker在linux环境的基本使用 使用两个tomcat作为 ...

  9. Ubuntu 16.04安装JDK并配置环境变量

    系统版本:Ubuntu 16.04 JDK版本:jdk1.8.0_121 1.官网下载JDK文件jdk-8u121-linux-x64.tar.gz 我这里下的是最新版,其他版本也可以 2.创建一个目 ...

  10. tornado的使用-上传图片

    tornado的使用-上传图片