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中小数转换整数的方法
Jan 26 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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文件怎么打开 如何执行php文件
2011/12/21 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
javascript闭包的理解
2015/04/01 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python实现选择排序
2017/06/04 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
初一家长会邀请函
2014/01/31 职场文书
出生证明公证书
2014/04/09 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
领导干部失职检讨书
2015/05/05 职场文书
工程款申请报告
2015/05/15 职场文书
七一活动主持词
2015/06/29 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript