仿淘宝回到顶部效果

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

思路：

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. 学习笔记30_ORM框架

    *在以往DAL层中,操作数据库使用DataTable,如果使得数据表DataTable转为List<>的话,写错属性名,在编译阶段是查不出来的,而ORM框架能解决此问题. *ORM是指面向 ...

  2. 14 Zabbix4.4.0系统实现监控checkpoint设备

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 14 Zabbix4.4.0系统实现监控checkpoint设备 1. 前期规划信息 2. 配置 ...

  3. Python 基础 常用模块

    Python 为我们提供了很多功能强大的模块,今天就主要使用的到的模块进行整理,方便后面来翻阅学习. 一.时间模块 在时间模块中我们重点介绍几种自己常用的功能,主要方便我们按照自己想要的方式获取时间 ...

  4. 深入理解计算机系统 第十章 系统级I/O

    很多高级语言都提供了执行 I/O 的较高级别的函数.为什么我们还要学习 Unix I/O? 原因:1.由于 I/O 和其他系统概念之间有循环依赖关系,故了解 Unix I/O 将帮助我们理解其他的系统 ...

  5. 如何构建自己的 react hooks

    我们组的前端妹子在组内分享时谈到了 react 的钩子,趁此机会我也对我所理解的内容进行下总结,方便更多的同学了解.在 React 的 v16.8.0 版本里添加了 hooks 的这种新的 API,我 ...

  6. 关于jQuery easyUI 添加合计统计行

    首先在onLoadSuccess中添加计算函数:计算方法按各自业务需要,我做了一个判断非数 然后再在gatagrid表格添加行,$('#div').datagrid('appendRow', {... ...

  7. PHP中跳出循环break,continue,return,exit的区别

    1. return 语句的作用       (1) return 从当前的方法中退出,返回到该调用的方法的语句处,继续执行.       (2) return 返回一个值给调用该方法的语句,返回值的数 ...

  8. C++中对C的扩展学习新增语法——内联函数以及函数参数

    内联函数以及函数参数 内联函数 使用 inline 关键字必须和函数体放在一起. 内联函数具有内部链接属性. 内联函数会被编译器在编译阶段替换到函数调用的地方. 可以把内联函数定义写到头文件中,多个c ...

  9. nyoj 17-单调递增最长子序列 && poj 2533(动态规划，演算法)

    17-单调递增最长子序列 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:21 submit:49 题目描述: 求一个字符串的最长递增子序列的长度 如 ...

  10. 0MQ宗旨

    先来看<Implementing distributed applications with 0MQ and some other bad guys...>.用0MQ去实现分布应用,或者用 ...