html

<template>
<a href="javascript:;" class="toTop" @click="backTop" v-show="backToTop">
<i class="iconfont"></i>
</a>
</template>

js

  1. 监听滚动事件

利用VUE写一个在控制台打印当前的scrollTop。首先,在 mounted 钩子中给window添加一个滚动滚动监听事件:

 mounted() {
window.addEventListener("scroll", this.scrollToTop);
},
  1. 监听回到顶部按钮距浏览器顶部的距离,滚动的距离如果大于浏览器高度时,设置 toTop 为true,否则就是false;
scrollToTop() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
let browserHeight = window.outerHeight;
if (scrollTop > browserHeight) {
this.backToTop = true
} else {
this.backToTop = false
}
}
}
  1. 点击回到顶部按钮,让距离逐渐减少,形成上划的效果
 //回到顶部
backTop() {
let back = setInterval(() => {
if (document.body.scrollTop || document.documentElement.scrollTop) {
document.body.scrollTop -= 100;
document.documentElement.scrollTop -= 100;
} else {
clearInterval(back);
}
});
},
  1. 离开该页面需要移除这个监听的事件
destroyed() {
window.removeEventListener("scroll", this.scrollToTop);
}

css

<style lang="scss">
.toTop {
position: fixed;
bottom: 150px;
right: 30px;
z-index:;
width: 70px;
height: 70px;
border-radius: 50%;
border: 1px solid #999; /*no*/
text-align: center;
background-color: #fff;
i {
color: #999;
font-size: 58px;
vertical-align: middle;
font-weight:;
}
}
</style>

												

vue回到顶部组件的更多相关文章

  1. Vue+elementUI 创建“回到顶部”组件

    1.创建"回到顶部"组件 1 <template> 2 <transition name="el-fade-in"> 3 <div ...

  2. vue 回到顶部的小问题

    今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏 因为可能会有其他的组件会用到这样的逻辑,所以将此功能 ...

  3. 移动端Vue回到顶部

    html: <div class="totop" id="totop" @click="Top" v-show="totop ...

  4. vue回到顶部的事件

    其实只需要一句代码就好了: document.documentElement.scrollTop = document.body.scrollTop = ;

  5. vue回顶部 组件 可以直接使用

    <template> <div id="goTop"> <div class="goTop" v-show="goTop ...

  6. vue回到顶部

    backTop() { var top = document.body.scrollTop || document.documentElement.scrollTop; this.duration - ...

  7. vue路由切换时内容组件的滚动条回到顶部

    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...

  8. Vue+element UI实现“回到顶部”按钮组件

    介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...

  9. vue中回到顶部

    1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...

随机推荐

  1. cekephp 事务处理

    $sw = $this->Orders->getDataSource(); $sw->begin(); $this->Orders->commit() $this-> ...

  2. Real Time Rendering 1

    [Real Time Rendering 1] 1.RTR是一本导论.官网:http://www.realtimerendering.com. 2.At around 6 fps, a sense o ...

  3. CRM某些表加入审计

    --更新参数文件,设置Audit等级 alter system set audit_trail=db,extended scope=spfile; --更新参数文件,开始Audit alter sys ...

  4. python -- 初始函数 函数的定义,函数的返回值以及函数的参数

    1.什么是函数,函数的定义及语法 2.函数的返回值 3.函数的参数 一.函数的定义及语法 函数的定义:定义了一个动作或者功能,是对功能的封装 语法: def 函数名( 形参列表 ):          ...

  5. (django1.10)访问url报错Forbidden (CSRF cookie not set.): xxx

    问题:页面访问时报错 Forbidden (CSRF cookie not set.): xxx     解决方法: 修改settings.py文件,注释掉 django.middleware.csr ...

  6. 1009 数字1的数量 数位dp

    1级算法题就这样了,前途渺茫啊... 更新一下博客,我刚刚想套用数位dp的模板,发现用那个模板也是可以做到,而且比第二种方法简单很多 第一种方法:我现在用dp[pos][now]来表示第pos位数字为 ...

  7. 153. Find Minimum in Rotated Sorted Array (Array; Divide-and-Conquer)

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  8. Angular之替换根组件

    一 在index.html中,替换根组件选择器 <!doctype html> <html lang="en"> <head> <meta ...

  9. Win10 安装 Anaconda3 用 Anaconda3 安装TensorFlow 1.2 (只支持python3.5)

    Win10 安装 Anaconda3 1.安装Anaconda3 选择相应的Anaconda进行安装,下载地址点击这里,下载对应系统版本的Anaconda,官网现在的版本是Anaconda 4.3.1 ...

  10. swift - 高斯模糊

      /* case extraLight case light case dark @available(iOS 10.0, *) case regular @available(iOS 10.0, ...