vue中的回到顶部
<template>
<div class="main">
<div class="content">灰色部分是内容部分</div>
<div class="red">红色部分是内容部分</div>
<div class="scollTop" id="imgscoll" v-show="isShowimg === true">
<img src="@/assets/dingbu@3x.png" alt @click="goTop">
</div>
</div>
</template>
<script>
export default {
data(){
return{
isShowimg: false,
}
},
mounted(){
window.addEventListener('scroll', this.handleScroll)
},
destroyed() {
document.removeEventListener('scroll', this.handleScroll)
document.body.scrollTop = document.documentElement.scrollTop =
},
methods:{
goTop() {
// 回到顶部
document.body.scrollTop = document.documentElement.scrollTop =
this.isShowimg = false
},
handleScroll(e) {
// 滚动操作监听
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// console.log(scrollTop)
let offsetTop =
try {
offsetTop = document.querySelector('.main').offsetTop
} catch (e) {
offsetTop =
}
if (scrollTop > offsetTop) {
// this.searchBarFixed = true
// this.scrollStatus = {
// display: 'block',
// background: '#fff',
// h: this.statusBarHeight.h
// }
if (scrollTop > ) {
this.isShowimg = true
} else {
this.isShowimg = false
}
} else {
// this.searchBarFixed = false
this.isShowimg = false
// this.scrollStatus = {
// display: 'none',
// background: 'transparent',
// h: 0
// }
}
}
}
}
</script>
<style>
*{
margin:;padding:;
}
.main{
width: %;
}
.content{
width: %;
height:60rem;
background: #eee;
}
.red{
height:30rem;
background: #f00;
}
.scollTop {
position: fixed;
bottom: 15rem;
right: 3rem;
}
.scollTop img{
width: 5rem;
height: 5rem;
}
</style>
注意图片需要自行进行引入
vue中的回到顶部的更多相关文章
- AspnetPager放在UpdatePanel中,回到顶部。
最近在做一个项目时,使用了AspNetPager分页控件进行分页,为了防止点击下一页时搜索条件消失掉,使用了UpdatePanel来进行局部刷新. 由此引发了一个问题,即点击某一页时,页面没有返回到顶 ...
- Vue+elementUI 创建“回到顶部”组件
1.创建"回到顶部"组件 1 <template> 2 <transition name="el-fade-in"> 3 <div ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- 【JavaScript Demo】回到顶部功能实现
随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...
- js实现回到顶部功能
js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...
- vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...
- vue 中<vue-scroll >滚动条回到顶部
今天项目碰到一个<vue-scroll >滚动条要回到顶部的需求,查询了好久终于解决了,这里记录一下: 其实就是scrollIntoView()方法的使用(官方文档): 需要注意的是要求页 ...
- vue 回到顶部的小问题
今天在用vue项目中,实现回到顶部功能的时候,我写了一个backTop组件,接下来需要通过监听window.scroll事件来控制这个组件显示隐藏 因为可能会有其他的组件会用到这样的逻辑,所以将此功能 ...
- vue回到顶部组件
html <template> <a href="javascript:;" class="toTop" @click="backT ...
随机推荐
- 曼孚科技:AI领域3种典型的深度学习算法
深度学习(Deep Learning)是机器学习(Machine Learning)领域中一个新的研究方向,引领了第三次人工智能的浪潮. 本文整理了深度学习领域3种典型的算法,希望可以帮助大家更好地 ...
- 小I的小姐姐
小 I 的小姐姐 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 小 I 去天津玩啦,一路上,他跟他的同学发生了许多有趣 ...
- sql 分组后查询出排序字段
select row_number() over(partition by CODE order by SEQUENCE) as RowIndex from Table 注:根据表的CODE 字 ...
- Mabitis中的#与$符号区别及用法介绍
这篇文章主要介绍了Mabitis中的 #{}与 ${} 符号区别,需要的朋友可以参考下 一.介绍 mybatis 中使用 Mapper.xml里面的配置进行 sql 查询,经常需要动态传递参数,例 ...
- Jmeter-几种脚本录制方式
一.使用代理服务器进行录制 1.创建线程组 2.创建http代理服务器 分组解释 不对样本分组:所有请求全部罗列 在组件添加分隔:加入一个虚拟的以分割线命名的动作 每个组放入一个新的控制器:执行时按控 ...
- arm-linux下qt + opencv开发环境的搭建(Altera DE1 Soc)
arm-linux-gnueabihf-gcc下载 qt下载 arm-linux下qt + opencv开发环境的搭建(Altera DE1 Soc) Ubuntu 16.04 安装QT arm嵌入式 ...
- R语言函数话学习笔记5
使用Tidyverse完成函数化编程 (参考了家翔学长的笔记) 1.magrittr包的使用 里面有很多的管道函数,,可以减少代码开发时间,提高代码可读性和维护性 1.1 四种pipeline 1.1 ...
- 用户登录(php)
<!DOCTYPE HTML><html><head><meta charset="utf-8"><script type=& ...
- ADO.NET中sqlserver和mysql的变量名
因为ADO.NET标配是访问SQL SERVER数据库,那么如果需要访问MySQL数据库,那么ADO.NET五个对象也必须转换. 访问 SQL SERVER 的ADO.NET对象 1.SqlConne ...
- IIS新类型文件500错误
时间过得太久,就真的会忘掉.在这里记录一下吧. 不得已重新安装系统,然后以前的配置都忘掉了.对新类型的文件.geojson 文件报错. 500错误. 首先反复调试MIME类型是否有问题, 再看映射是否 ...