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 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
JavaScript效率调优经验
Jun 04 Javascript
javascript读写json示例
Apr 11 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
解决Vue watch里调用方法的坑
Nov 07 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
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
python retrying模块的使用方法详解
2019/09/25 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
质量承诺书格式范文
2015/04/28 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
第一节英语课开场白
2015/06/01 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android