vue回到顶部组件
html
<template>
<a href="javascript:;" class="toTop" @click="backTop" v-show="backToTop">
<i class="iconfont"></i>
</a>
</template>
js
- 监听滚动事件
利用VUE写一个在控制台打印当前的scrollTop。首先,在 mounted 钩子中给window添加一个滚动滚动监听事件:
mounted() {
window.addEventListener("scroll", this.scrollToTop);
},
- 监听回到顶部按钮距浏览器顶部的距离,滚动的距离如果大于浏览器高度时,设置 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
}
}
}
- 点击回到顶部按钮,让距离逐渐减少,形成上划的效果
//回到顶部
backTop() {
let back = setInterval(() => {
if (document.body.scrollTop || document.documentElement.scrollTop) {
document.body.scrollTop -= 100;
document.documentElement.scrollTop -= 100;
} else {
clearInterval(back);
}
});
},
- 离开该页面需要移除这个监听的事件
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回到顶部组件的更多相关文章
- Vue+elementUI 创建“回到顶部”组件
1.创建"回到顶部"组件 1 <template> 2 <transition name="el-fade-in"> 3 <div ...
- vue 回到顶部的小问题
今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏 因为可能会有其他的组件会用到这样的逻辑,所以将此功能 ...
- 移动端Vue回到顶部
html: <div class="totop" id="totop" @click="Top" v-show="totop ...
- vue回到顶部的事件
其实只需要一句代码就好了: document.documentElement.scrollTop = document.body.scrollTop = ;
- vue回顶部 组件 可以直接使用
<template> <div id="goTop"> <div class="goTop" v-show="goTop ...
- vue回到顶部
backTop() { var top = document.body.scrollTop || document.documentElement.scrollTop; this.duration - ...
- vue路由切换时内容组件的滚动条回到顶部
在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...
- Vue+element UI实现“回到顶部”按钮组件
介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...
- vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...
随机推荐
- cekephp 事务处理
$sw = $this->Orders->getDataSource(); $sw->begin(); $this->Orders->commit() $this-> ...
- Real Time Rendering 1
[Real Time Rendering 1] 1.RTR是一本导论.官网:http://www.realtimerendering.com. 2.At around 6 fps, a sense o ...
- CRM某些表加入审计
--更新参数文件,设置Audit等级 alter system set audit_trail=db,extended scope=spfile; --更新参数文件,开始Audit alter sys ...
- python -- 初始函数 函数的定义,函数的返回值以及函数的参数
1.什么是函数,函数的定义及语法 2.函数的返回值 3.函数的参数 一.函数的定义及语法 函数的定义:定义了一个动作或者功能,是对功能的封装 语法: def 函数名( 形参列表 ): ...
- (django1.10)访问url报错Forbidden (CSRF cookie not set.): xxx
问题:页面访问时报错 Forbidden (CSRF cookie not set.): xxx 解决方法: 修改settings.py文件,注释掉 django.middleware.csr ...
- 1009 数字1的数量 数位dp
1级算法题就这样了,前途渺茫啊... 更新一下博客,我刚刚想套用数位dp的模板,发现用那个模板也是可以做到,而且比第二种方法简单很多 第一种方法:我现在用dp[pos][now]来表示第pos位数字为 ...
- 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. ...
- Angular之替换根组件
一 在index.html中,替换根组件选择器 <!doctype html> <html lang="en"> <head> <meta ...
- Win10 安装 Anaconda3 用 Anaconda3 安装TensorFlow 1.2 (只支持python3.5)
Win10 安装 Anaconda3 1.安装Anaconda3 选择相应的Anaconda进行安装,下载地址点击这里,下载对应系统版本的Anaconda,官网现在的版本是Anaconda 4.3.1 ...
- swift - 高斯模糊
/* case extraLight case light case dark @available(iOS 10.0, *) case regular @available(iOS 10.0, ...