模仿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. 开发你的第一个BLE应用程序—Blinky

    本文将和大家一起编写我们的第一个BLE应用程序:Blinky(闪灯程序),哪怕你之前没有任何BLE开发经验,也不用担心,只要跟着文中所述步骤,你就可以一步步搭建自己的第一个BLE应用程序.通过这个Bl ...

  2. 【欧拉函数】BZOJ2705: [SDOI2012]Longge的问题

    Description Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, N)(1<=i <=N).   Solut ...

  3. BZOJ_1101_[POI2007]Zap_莫比乌斯反演

    题意:FGD正在破解一段密码,他需要回答很多类似的问题:对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a ,y<=b,并且gcd(x,y)=d.作为FGD的同学,FGD希望得到 ...

  4. ruby整理

    参考博客:https://www.cnblogs.com/felixzh/p/8081622.html 官网地址 https://rvm.io/rvm/install 一.前提  centos6.8下 ...

  5. Django admin自定制功能

    一:基础设置 1.应用注册 1)方式一 若要把app应用显示在后台管理中,需要在admin.py中注册.打开admin.py文件,如下代码: from django.contrib import ad ...

  6. koa+mysql+vue+socket.io全栈开发之数据访问篇

    后端搭起大体的框架后,接着涉及到的就是如何将数据持久化的问题,也就是对数据库进行 CURD 操作. 关于数据库方案, mongodb 和 mysql 都使用过,但我选用的是 mysql,原因: 目前为 ...

  7. 小程序 表单 获取 formId

    微信小程序使用模板消息需要使用支付prepay_id或表单提交formId, 要获得 formId 需要在 form 标签中声明属性    report-submit="true" ...

  8. 在ASP.NET Core中使用EPPlus导入出Excel文件

    这篇文章说明了如何使用EPPlus在ASP.NET Core中导入和导出.xls/.xlsx文件(Excel).在考虑使用.NET处理excel时,我们总是寻找第三方库或组件.使用Open Offic ...

  9. Java8新特性之一：Lambda表达式

    Java8是自java5之后最重大的一次更新,它给JAVA语言带来了很多新的特性(包括编译器.类库.工具类.JVM等),其中最重要的升级是它给我们带来了Lambda表达式和Stream API. 1. ...

  10. 论JVM爆炸的几种姿势及自救方法

    前言 如今不管是在面试还是在我们的工作中,OOM总是不断的出现在我们的视野中,所以我们有必要去了解一下导致OOM的原因以及一些基本的调整方法,大家可以通过下面的事例来了解一下什么样的代码会导致OOM, ...