模仿Element-UI 回到页面顶部

BackToTop.vue

<template>

  <transition :name="transitionName">

    <div class="page-component-up"

      @click="backToTop"

      v-show="visible"

      :style="customStyle">

      <i class="el-icon-caret-top"></i>

    </div>

  </transition>

</template>

<script>

export default {

  name: 'BackToTop',

  props: {

    transitionName: {

      type: String,

      default: 'fade'

    },

    customStyle: {

      type: Object

    },

    visibilityHeight: { // 纵向滑动多远距离出现滚动条

      type: Number

    },

    backPosition: { // 返回顶部时，滚动到哪里（距离顶部的距离）

      type: Number,

      default: 0

    }

  },

  data() {

    return {

      visible: false,

      interval: null

    }

  },

  mounted() {

    window.addEventListener('scroll', this.handleScroll)

  },

  beforeDestroy() {

    window.removeEventListener('scroll', this.handleScroll)

    if(this.interval) {

      clearInterval(this.interval)

    }

  },

  methods: {

    handleScroll() {

      this.visible = window.pageYOffset > this.visibilityHeight

    },

    backToTop() {

      let distanceY = window.pageYOffset

      let i = 0

      this.interval = setInterval(() => {

        let next = Math.floor(this.easeInOutQuad(10 * i, distanceY, -distanceY, 500))

        if(next <= this.backPosition) {

          window.scrollTo(0, this.backPosition)

          clearInterval(this.interval)

        } else{

          window.scrollTo(0, next)

        }

        i++

      }, 17)

    },

    /*

      缓动公式（Tween算法）

       t: 动画已经执行的时间（实际上时执行多少次/帧数）

       b: 起始位置

       c: 终止位置

       d: 从起始位置到终止位置的经过时间（实际上时执行多少次/帧数）

      http://www.cnblogs.com/mrsunny/archive/2011/06/21/2086080.html

    */

    easeInOutQuad(t, b, c, d) {

      // 判断当前时间是否总在总时间的一半以内，是的话执行缓入函数，否则的话执行缓出函数

      if ((t /= d / 2) < 1) {

        return c / 2 * t * t + b

      } else {

        // 将总长度设置为一半，并且时间从当前开始递减，对图像进行垂直向上平移

        return -c / 2 * (--t * (t - 2) - 1) + b

      }

    }

  }

}

</script>

<style lang="scss" scoped>

.page-component-up{

  position: fixed;

  cursor: pointer;

  text-align: center;

  transition: .3s;

  box-shadow: 0 0 6px rgba(0,0,0,.12);

  z-index: 99;

  i{

    color: #409eff;

    display: block;

    line-height: inherit;

    text-align: center;

    font-size: 18px;

  }

}

</style>

页面引用：

<template>

  <div>

    <h1>返回顶部</h1>

    <div>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

      <el-alert title="山桃红花满上头，蜀江春水拍山流。" type="success"></el-alert>

    </div>

    <el-tooltip placement="top" content="返回顶部">

      <back-to-top

        transitionName="fade"

        :customStyle="myBackToTopStyle"

        :visibilityHeight="300"

        :backPosition="50">

      </back-to-top>

    </el-tooltip>

  </div>

</template>

<script>

import BackToTop from '@/components/BackToTop'

export default {

  data() {

    return {

      myBackToTopStyle: {

        'right': '100px',

        'bottom': '150px',

        'width': '40px',

        'height': '40px',

        'border-radius': '20px',

        'line-height': '40px',

        'background': '#fff'

      }

    }

  },

  components: {

    BackToTop

  }

}

</script>

展示效果：

demo 地址：https://github.com/frwupeng517/element-admin/blob/master/src/components/BackToTop.vue

vue 回到页面顶部的更多相关文章

  1. 基于JS实现回到页面顶部的五种写法(从实现到增强)

    这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下   写法 [1]锚点 使用锚点链接是一种 ...

  2. JS实现回到页面顶部动画效果 2016.03.23

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...

  3. 今天才知道a标签的href="#"是回到页面顶部

    如题,真的是,做了一年多的开发,今天才知道a标签的href="#"是回到顶部.以前一直以为这是个多么了不起的功能. 顺便扩展一下滑动隐藏和显示按钮(从别处拷贝来的代码) $( do ...

  4. jquery点击回到页面顶部方法

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  5. 点击按钮回到页面顶部或者某个高度时的问题，JQUERY

    $('#shang').click(function(){ $('html,body').animate({scrollTop: '0px'}, 800); }); 不能写成$(window).ani ...

  6. JS刷新后回到页面顶部

    window.location.href = location.href; 方法一: $(window).scrollTop(0); 方法二:$('html ,body').animate({ scr ...

  7. 解决点击a标签返回页面顶部的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js网页返回页面顶部的小方法

    咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...

  9. jquery实现返回页面顶部功能。

    <p id="back-to-top"> <span></span> </p> <script type="text ...

随机推荐

  1. channel.go

    )         c.RLock()         client, ok := c.clients[msg.clientID]         c.RUnlock()         if ok ...

  2. too many open files linux服务器 golang java

    1. 现象 服务的cpu跑满(golang实现), 并大量报too many open files错误.服务使用systemd来运行,部署在阿里ecs上. 2.分析 从日志来看,cpu的上升主要为到达 ...

  3. Centos打开、关闭、结束tomcat，及查看tomcat运行日志

    cd到tomcat目录下之后 启动:一般是执行sh bin/startup.sh 停止:一般是执行sh bin/shutdown.sh查看:执行ps -ef |grep tomcat 输出如下 *** ...

  4. 【Canal源码分析】Canal Instance启动和停止

    一.序列图 1.1 启动 1.2 停止 二.源码分析 2.1 启动 这部分代码其实在ServerRunningMonitor的start()方法中.针对不同的destination,启动不同的Cana ...

  5. 【爆料】-《亚伯大学毕业证书》Aber一模一样原件

    ☞亚伯大学毕业证书[微/Q:865121257◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归&am ...

  6. js操作中要去注意的一些问题

    1.js中注意问题 font-size 改成fontSize padding-top 改成paddingTop js中不认识-,所以要以小驼峰方式操作属性或者以[" "]方式,例[ ...

  7. Https协议与HttpClient的实现

    一.背景 HTTP是一个传输内容有可读性的公开协议,客户端与服务器端的数据完全通过明文传输.在这个背景之下,整个依赖于Http协议的互联网数据都是透明的,这带来了很大的数据安全隐患.想要解决这个问题有 ...

  8. 利用face_recognition库裁取人脸

    from PIL import Image import face_recognition # Load the jpg file into a numpy array image = face_re ...

  9. Xshell访问和连接Linux

    Xshell是一款强大的安全终端模拟软件,Xshell 模拟了远程主机的操作,其实质就是通过访问和连接到远程主机,在本地实现对远程主机的操作.  一.下载 官网:https://www.netsara ...

  10. sau交流学习社区--在element-ui中新建FormData对象组合上传图片和文件的文件对象，同时需要携带其他参数

    今天有一个坑,同时要上传图片和文件,而且图片要展示缩略图,文件要展示列表. 我的思路是: 首先,只上传附件照片,这个直接看ele的官方例子就行,不仅仅上传附件照片,还同时上传其他参数. 然后,再做上传 ...