js实现带有动画的返回顶部


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了js实现带有动画返回顶部的具体代码,供大家参考,具体内容如下

1、滑动鼠标往下滑动,侧边栏跟着往上移动,当到达某一个位置的时候,侧边栏停止移动;鼠标往上,则侧边栏往下-停止

js实现带有动画的返回顶部

2、当鼠标继续下滑到某一个位置,“返回顶部”几个字会弹出此处如果点击“返回顶部”,则立刻到了顶部

js实现带有动画的返回顶部

3、到达顶部位置效果

js实现带有动画的返回顶部

4、源代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 版心 */
    .w {
      width: 980px;
      margin: 0 auto;
    }

    /* 头部样式 */
    .head {
      height: 200px;
      background-color: teal;
    }

    /* 内容区域样式 */
    .banner {
      height: 450px;
      background-color: red
    }

    /* sidebar是侧边栏 */
    .sidebar {
      position: absolute;
      top: 300px;
      right: 250px;
      display: inline-block;
      width: 40px;
      height: 80px;
      background-color: cyan;
      text-align: center;
    }

    /* 侧边栏 “返回顶部”字体 */
    .sidebar span {
      display: none;
      font-size: 14px;
      cursor: pointer;
    }

    /* 主体div样式 */
    .zhuti {
      height: 300px;
      background-color: violet;
    }

    /* 底部样式 */
    .footer {
      height: 700px;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div class="sidebar">广告<br><br>
    <span id="returns">返回顶部</span>
  </div>
  <div class="head w">头部区域</div>
  <div class="banner w">banner区域</div>
  <div class="zhuti w">主体区域</div>
  <div class="footer w">尾部区域</div>

  <script>
    // Js代码部分
    var sidebar = document.querySelector('.sidebar')
    var banner = document.querySelector('.banner')
    var bannerTop = banner.offsetTop;

    // 获取 主体 区域的事件源
    var zhuti = document.querySelector('.zhuti');
    var span = document.querySelector('span');
    var zhutiTop = zhuti.offsetTop;
    // console.log(bannerTop) // 200 
    // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
    // 当我们侧边栏固定定位之后应该变化的数值
    var sidebarTop = sidebar.offsetTop - bannerTop;
    document.addEventListener('scroll', function () {
      // console.log(window.pageYOffset)
      if (window.pageYOffset >= bannerTop) {
        sidebar.style.position = 'fixed';
        sidebar.style.top = sidebarTop + 'px';
      } else {
        sidebar.style.position = 'absolute';
        sidebar.style.top = 300 + 'px';
      }

      // 当到底主题区域的时候,显示span的内容
      if (window.pageYOffset >= zhutiTop) {
        span.style.display = 'block';
      } else {
        span.style.display = 'none';
      }
    })
    // 封装了一个动画js文件
    function animation(obj, target, fn1) {
      // console.log(fn1);
      // fn是一个回调函数,在定时器结束的时候添加
      // 每次开定时器之前先清除掉定时器
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        // 步长计算公式  越来越小
        // 步长取整
        var step = (target - obj.pageYOffset) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.pageYOffset == target) {
          clearInterval(obj.timer);
          // 如果fn1存在,调用fn
          if (fn1) {
            fn1();
          }
        } else {
          // 每30毫秒就将新的值给obj.left
          window.scroll(0, obj.pageYOffset + step);
        }
      }, 30)
    }

    // 获取返回顶部的事件 点击触发
    var returns = document.querySelector('#returns');
    returns.addEventListener('click', function () {
      // alert(111);
      // window.scroll(x,y) 可以返回顶部
      // window.scroll(0,0);
      animation(window, 0)
    })
  </script>
</body>

</html>

5、喜欢记得点击,关注,收藏噢,不喜勿喷~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery validator 插件增加日期比较方法
Feb 21 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 #Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 #Javascript
vue 子组件watch监听不到prop的解决
Aug 09 #Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 #Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 #Javascript
bootstrap实现tab选项卡切换
Aug 09 #Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 #Javascript
You might like
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
PHP开发需要注意的安全问题
2010/09/01 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
javascript import css实例代码
2008/07/18 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
python网络编程实例简析
2014/09/26 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
英国网上超市:Ocado
2020/03/05 全球购物
程序员机试试题汇总
2012/03/07 面试题
女大学生自我鉴定
2013/12/09 职场文书
实习鉴定范文
2013/12/19 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
库房管理员岗位职责
2014/03/09 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
新农村建设标语
2014/06/24 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
法制主题班会教案
2015/08/13 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技