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 相关文章推荐
js 判断一个元素是否在页面中存在
Dec 27 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
vuejs选中当前样式active的实例
Aug 22 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
vue @click.native 绑定原生点击事件
Apr 22 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
使用Sphinx对索引进行搜索
2013/06/25 PHP
php 问卷调查结果统计
2015/10/08 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
实例讲解PHP表单处理
2019/02/15 PHP
心扬JS分页函数代码
2010/09/10 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
微信JS接口大全
2016/08/25 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
python 读写中文json的实例详解
2017/10/29 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python实现ID3决策树算法
2018/08/29 Python
Django开发的简易留言板案例详解
2018/12/04 Python
dpn网络的pytorch实现方式
2020/01/14 Python
详解python中的lambda与sorted函数
2020/09/04 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
汽修专业学生自我鉴定
2013/11/16 职场文书
车间安全生产标语
2014/06/06 职场文书
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL