仿淘宝回到顶部效果

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

思路：

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. Java抽象类、接口、内部类

    抽象类的概念: 1.Java中可以定义没有方法体的方法,还方法的具体实现由子类完成,该方法称为抽象方法,包含抽象方法的类就是抽象类: 2.如,shape类计算周长和面积的方法无法确定,那么就可以将这样 ...

  2. 复制/etc/profile至/tmp/目录，用查找替换命令删除/tmp/profile文件中的 行首的空白字符及在vim中设置tab缩进为4个字符

    1.复制/etc/profile至/tmp/目录,用查找替换命令删除/tmp/profile文件中的 行首的空白字符 在命令模式下,使用正则表达式匹配 行首有空白字符行的模式:^[[:space:]] ...

  3. MongoDB自学------（1）MongoDB4.0安装

    一.环境 操作系统 安装包 安装方式 Ubuntu18.04 mongodb4.0 apt安装 Ubuntu18.04 mongodb4.0 docker安装 二.apt安装 sudo apt-key ...

  4. Win7安装解压版MySQL

    1.下载MySQL 访问https://dev.mysql.com/downloads/mysql/5.6.html#downloads,下载操作系统对应的版本(无账号需先注册一个),以mysql-5 ...

  5. 最新JetBrains PyCharm 使用教程--安装教程（一）

    安装过程 ​ ​ ​ ​ ​ ​ ​ Pycharm  激活码 license server选项里边输入:http://intellij.mandroid.cn/ ​

  6. phpexcel导出数字带E的解决方法

    phpexcel导出数字带E的解决方法 excel之所以带E 是因为按照数字格式来显示了(数字过长的时候) 数字左边或者右边加空格就变成字符串了 那么excel就会按照字符串格式来显示了 就不会带E了

  7. 关于Struts.xml的路径配置以及对应的连接路径问题

    主要记住一点!: 1.   namespace的路径配置例如:/x:   2.  name名自由配置(主要用来是做action跳转方法用的) 3.  form表单中提交action时以这个格式提交(此 ...

  8. macOS 使用Miniconda配置本地数据运算环境

    目前,做数据分析工作,基本人手Numpy,pandas,scikit-learn.而这些计算程序包都是基于python平台的,所以搞数据的都得先装个python环境...(当然,你用R或Julia请忽 ...

  9. Maven和Gradle中配置单元测试框架Spock

    Maven Maven本身不支持其他JVM语言(例如Groovy或Scala).要在Maven项目中使用它,需要使用第三方插件.对于Groovy而言,最好的选择似乎是GMavenPlus(重写不再维护 ...

  10. nyoj 72-Financial Management (求和 ÷ 12.0)

    72-Financial Management 内存限制:64MB 时间限制:3000ms 特判: No 通过数:7 提交数:12 难度:1 题目描述: Larry graduated this ye ...