模仿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. 【Homework】LCA&RMQ

    我校是神校,作业竟然选自POJ,难道不知道“珍爱生命 勿刷POJ”么? 所有注明模板题的我都十分傲娇地没有打,于是只打了6道题(其实模板题以前应该打过一部分但懒得找)(不过感觉我模板还是不够溜要找个时 ...

  2. BZOJ_3687_简单题_bitset

    BZOJ_3687_简单题_bitset Description 小呆开始研究集合论了,他提出了关于一个数集四个问题: 1．子集的异或和的算术和. 2．子集的异或和的异或和. 3．子集的算术和的算术和 ...

  3. 【游戏开发】在Lua中实现面向对象特性——模拟类、继承、多态

    一.简介 Lua是一门非常强大.非常灵活的脚本语言,自它从发明以来,无数的游戏使用了Lua作为开发语言.但是作为一款脚本语言,Lua也有着自己的不足,那就是它本身并没有提供面向对象的特性,而游戏开发是 ...

  4. 快照（Snapshot）技术发展综述

    快照(Snapshot)技术发展综述 刘爱贵 摘要:传统数据备份技术存在备份窗口.恢复时间目标RTO和恢复时间点RPO过长的问题,无法满足企业关键性业务的数据保护需求,因此产生了数据快照技术.本文对快 ...

  5. MySql-两阶段加锁协议

    此篇博客主要是讲述MySql(仅限innodb)的两阶段加锁(2PL)协议,而非两阶段提交(2PC)协议,区别如下: 2PL,两阶段加锁协议:主要用于单机事务中的一致性与隔离性. 2PC,两阶段提交协 ...

  6. 教你如何使用Java手写一个基于数组实现的队列

    一.概述 队列,又称为伫列(queue),是先进先出(FIFO, First-In-First-Out)的线性表.在具体应用中通常用链表或者数组来实现.队列只允许在后端(称为rear)进行插入操作,在 ...

  7. 部署Chart应用并使用.net core读取Kubernetes中的configMap

    上一篇文章讲了 k8s使用helm打包chart并上传到腾讯云TencentHub,今天就讲一下使用Helm部署应用并使用configMap代替asp.net core 中的appsettings.j ...

  8. Redis客户端——Jedis的使用

    本文介绍基于Java语言的Redis客户端——Jedis的使用,包括Jedis简介.获取Jedis.Jedis直连.Jedis连接池以及二者的对比的选择. Jedis简介 Jedis 是 Redis  ...

  9. C# 替换Word文本—— 用文档、图片、表格替换文本

    编辑文档时,对一些需要修改的字符或段落可以通过查找替换的方式,快速地更改.在C# 在word中查找及替换文本一文中,主要介绍了在Word中以文本替换文本的方法,在本篇文章中,将介绍如何用一篇Word文 ...

  10. AI2(App Inventor 2)离线版服务器网络版

    个人修改包括: 1.后台增加用户批量添加功能         https://gte.fsyz.net/node/1877 2.上传文件限制改为100M ,编译文件限制改为10M      https ...