仿淘宝回到顶部效果

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

思路：

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. 问题：做EsayUI分页报错 $(...).pagination is not a function之后我把<jsp:include page="top.jsp"/>去掉就好了，有大神知道为什么吗？另外分页按键放在那里好些，我放到form表单下，就开始显示，点一下后就没有了

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  2. PHP经典面试题：如何保证缓存与数据库的双写一致性？

    只要用缓存,就可能会涉及到缓存与数据库双存储双写,你只要是双写,就一定会有数据一致性的问题,那么你如何解决一致性问题? 面试题剖析 一般来说,如果允许缓存可以稍微的跟数据库偶尔有不一致的情况,也就是说 ...

  3. java编程思想第四版第十章习题

    第一题 package net.mindview.innerclasses; public class Outer { class Inner { Inner(){ System.out.printl ...

  4. Verilog模块概念和实例化#转载自Jason from Lofter

    Verilog模块概念和实例化 模块的概念 模块(module)是verilog最基本的概念,是v设计中的基本单元,每个v设计的系统中都由若干module组成. 1.模块在语言形式上是以关键词modu ...

  5. QQ是怎样创造出来的？——解密好友系统的设计

    本篇介绍笔者接触的第一个后台系统,从自身见闻出发,因此涉及的内容相对比较基础,后台大牛请自觉略过. 什么是好友系统? 简单的说,好友系统是维护用户好友关系的系统.我们最熟悉的好友系统案例当属QQ,实际 ...

  6. 通过 position:fixed 实现底部导航

    通过 position:fixed 实现底部导航 HTML <div id="footer">页脚</div> CSS #footer { clear: b ...

  7. nyoj 244-16进制的简单运算 （scanf("%x%c%x", &a, &b, &c); printf("%o", a ± b)）

    244-16进制的简单运算 内存限制:64MB 时间限制:1000ms 特判: No 通过数:12 提交数:13 难度:1 题目描述: 现在给你一个16进制的加减法的表达式,要求用8进制输出表达式的结 ...

  8. expect 自动填充密码

    它的脚本以#!/usr/bin/expect开头,执行时用expoct,而不是bash.我的一个给samba自动创建用户并且自动填写默认密码的脚本如下: vim smb_passwd.exp #!/u ...

  9. 树莓派3B/3B+和4B安装OpenCV教程

    安装前准备 在树莓派上拓展文件系统 如果你使用的树莓派为新装的系统,那么第一件事情就是扩展文件系统,以包括microSD卡上的所有空间. 具体步骤如下: 1.在树莓派终端(或者SSH)上输入: $ s ...

  10. 分析facebook的AsyncDisplayKit框架中的Transaction的工作原理

    在AsyncDisplayKit框架中有一个_ASAsyncTransaction模块,用于AsyncDiplayNode的异步事务,使用了dispatch_group实现. 主要目的是将operat ...