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获取网站Alexa排名的代码
Dec 12 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
JavaScript对象学习小结
Sep 02 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
微信小程序checkbox组件使用详解
Jan 31 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实现框架(一)
2006/10/09 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
nodejs教程之入门
2014/11/21 NodeJs
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
vue组件生命周期详解
2017/11/07 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
python在windows下实现备份程序实例
2014/07/04 Python
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
单位人事专员介绍信
2014/01/11 职场文书
婚前保证书
2014/04/29 职场文书
毕业生见习报告总结
2014/11/08 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
三八妇女节致辞
2015/07/31 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
MongoDB使用场景总结
2022/02/24 MongoDB