仿淘宝回到顶部效果

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

思路：

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. Lucas的数论：杜教筛，莫比乌斯反演

    Description: 求$\sum\limits_{i=1}^{n} \sum\limits_{j=1}^{n} d(i \times j)$ $d(i)$表示$i$的约数个数和.$n \leq ...

  2. windows系统一台电脑先后添加多个git账号

    概述 电脑上已经配置了github的ssh连接.现在又有一个不同的git账户,也就是要在一台电脑上配置两个git账号. 下面记录一下我配置的方法. 一.取消git全局配置 之前配置github的时候, ...

  3. SSM配置后可以访问静态html文件但无法访问其他后台接口的解决方案

    web.xml中的一段 <servlet> <servlet-name>SpringMVC</servlet-name> <servlet-class> ...

  4. Win7安装解压版MySQL

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

  5. [LINQ2Dapper]最完整Dapper To Linq框架(五)---查看Linq实际执行的SQL

    此例子是使用LINQ2Dapper封装,效率优于EntityFramwork,并且支持.NetFramework和.NetCore框架,只依赖于Dapper支持.net framework4.6.1及 ...

  6. java笔试面试第二天

    没想到第二次面试到了第二周,也是我在上海找工作的第二周,说实话,没有真本事找工作是真的难,虽然正在召开的十九大上,大大们纷纷表态国力正盛,经济稳步增长,就业压力逐渐缓解,但是社会终究是社会,要么靠实力 ...

  7. 深入讲解 Laravel 的 IoC 服务容器

    众所周知,Laravel 控制反转 (IoC) / 依赖注入 (DI) 的功能非常强大.遗憾的是, 官方文档 并没有详细讲解它的所有功能,所以我决定自己实践一下,并整理成文.下面的代码是基于 Lara ...

  8. MD5 加盐加密

    一.概述 MD5(Message Digest  Algorithm 5),是一种散列算法,是不可逆的,即通过md5加密之后没办法得到原文,没有解密算法. 在一般的项目中都会有登录注册功能,最简单的, ...

  9. 4. 彤哥说netty系列之Java NIO实现群聊（自己跟自己聊上瘾了）

    你好,我是彤哥,本篇是netty系列的第四篇. 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识. 简介 上一章我们一起学习了Java中的BIO/NIO/AIO的故事,本章将带着大家一起使 ...

  10. Maven系列第8篇：你的maven项目构建太慢了，我实在看不下去，带你一起磨刀！！多数使用maven的人都经常想要的一种功能，但是大多数人都不知道如何使用！！！

    maven系列目标:从入门开始开始掌握一个高级开发所需要的maven技能. 这是maven系列第8篇. 整个maven系列的内容前后是有依赖的,如果之前没有接触过maven,建议从第一篇看起,本文尾部 ...