模仿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. 理解Go Context机制

    1 什么是Context 最近在公司分析gRPC源码,proto文件生成的代码,接口函数第一个参数统一是ctx context.Context接口,公司不少同事都不了解这样设计的出发点是什么,其实我也 ...

  2. 【二分贪心】Bzoj3969 [WF2013] Low Power

    Description 有n个机器,每个机器有2个芯片,每个芯片可以放k个电池. 每个芯片能量是k个电池的能量的最小值. 两个芯片的能量之差越小,这个机器就工作的越好. 现在有2nk个电池,已知它们的 ...

  3. Android圆形头像，拍照后“无法加载此图片”的问题解决（适配Android7.0）

    Feature: 点击选择拍照或者打开相册,选取图片进行裁剪最后设置为圆形头像. Problem: 拍好照片,点击裁剪,弹Toast"无法加载此图片". Solution: 在裁剪 ...

  4. 【爆料】-《伯明翰大学学院毕业证书》UCB一模一样原件

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

  5. 【英国毕业原版】-《伯明翰城市大学毕业证书》BCU一模一样原件

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

  6. 如何做好技术Team Leader

    背景 互联网公司的技术团队管理通常分为2个方向:技术管理和团队管理,互联网公司的技术TL与传统软件公司的PM还是有很大的区别,传统软件公司的PM更多注重于对项目的管理包括项目任务拆解.项目进度以及风险 ...

  7. 使用CompletableFuture实现异步编程

    在开发中会碰到一种场景,如下 Object result1 = service1.func1();//执行80ms Object result2 =service2.func2();//执行50ms ...

  8. jdk源码阅读笔记-LinkedList

    一.LinkedList概述 LinkedList的底层数据结构为双向链表结构,与ArrayList相同的是LinkedList也可以存储相同或null的元素.相对于ArrayList来说,Linke ...

  9. Unity C#笔记 协程

    什么是协程 协同程序,在主程序运行的同时,开启另外一段逻辑处理,来协同当前程序的执行. 可能看了这段文字介绍还是有点模糊,其实可以用多线程来比较. 多线程 多线程,顾名思义,多条同时执行的线程. 最初 ...

  10. netcore程序部署到docker

    1.基础准备 1. ubuntu 18.04 2. docker version 18.09 3. netcore 2.1 2.简介 自从netcore支持跨平台之后,以及现在很多公司都是采用容器化部 ...