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 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
js实现简单锁屏功能实例
May 27 Javascript
javascript字符串函数汇总
Dec 06 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
vue 中几种传值方法(3种)
Nov 12 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
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
配置支持SSI
2006/11/25 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
javascript基础知识讲解
2017/01/11 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python中生成Epoch的方法
2017/04/26 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python如何实现视频转代码视频
2019/06/17 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
进步之星获奖感言
2014/02/22 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python