<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中的回到顶部的更多相关文章

  1. AspnetPager放在UpdatePanel中,回到顶部。

    最近在做一个项目时,使用了AspNetPager分页控件进行分页,为了防止点击下一页时搜索条件消失掉,使用了UpdatePanel来进行局部刷新. 由此引发了一个问题,即点击某一页时,页面没有返回到顶 ...

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

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

  3. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  4. 【JavaScript Demo】回到顶部功能实现

    随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...

  5. js实现回到顶部功能

    js实现回到顶部功能 一.总结 一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(t ...

  6. vue中回到顶部

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

  7. vue 中<vue-scroll >滚动条回到顶部

    今天项目碰到一个<vue-scroll >滚动条要回到顶部的需求,查询了好久终于解决了,这里记录一下: 其实就是scrollIntoView()方法的使用(官方文档): 需要注意的是要求页 ...

  8. vue 回到顶部的小问题

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

  9. vue回到顶部组件

    html <template> <a href="javascript:;" class="toTop" @click="backT ...

随机推荐

  1. 曼孚科技:AI领域3种典型的深度学习算法

    ​深度学习(Deep Learning)是机器学习(Machine Learning)领域中一个新的研究方向,引领了第三次人工智能的浪潮. 本文整理了深度学习领域3种典型的算法,希望可以帮助大家更好地 ...

  2. 小I的小姐姐

    小 I 的小姐姐 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 小 I 去天津玩啦,一路上,他跟他的同学发生了许多有趣 ...

  3. sql 分组后查询出排序字段

    select  row_number() over(partition by  CODE order by SEQUENCE) as RowIndex  from Table 注:根据表的CODE 字 ...

  4. Mabitis中的#与$符号区别及用法介绍

    这篇文章主要介绍了Mabitis中的 #{}与   ${} 符号区别,需要的朋友可以参考下 一.介绍 mybatis 中使用 Mapper.xml里面的配置进行 sql 查询,经常需要动态传递参数,例 ...

  5. Jmeter-几种脚本录制方式

    一.使用代理服务器进行录制 1.创建线程组 2.创建http代理服务器 分组解释 不对样本分组:所有请求全部罗列 在组件添加分隔:加入一个虚拟的以分割线命名的动作 每个组放入一个新的控制器:执行时按控 ...

  6. arm-linux下qt + opencv开发环境的搭建(Altera DE1 Soc)

    arm-linux-gnueabihf-gcc下载 qt下载 arm-linux下qt + opencv开发环境的搭建(Altera DE1 Soc) Ubuntu 16.04 安装QT arm嵌入式 ...

  7. R语言函数话学习笔记5

    使用Tidyverse完成函数化编程 (参考了家翔学长的笔记) 1.magrittr包的使用 里面有很多的管道函数,,可以减少代码开发时间,提高代码可读性和维护性 1.1 四种pipeline 1.1 ...

  8. 用户登录(php)

    <!DOCTYPE HTML><html><head><meta charset="utf-8"><script type=& ...

  9. ADO.NET中sqlserver和mysql的变量名

    因为ADO.NET标配是访问SQL SERVER数据库,那么如果需要访问MySQL数据库,那么ADO.NET五个对象也必须转换. 访问 SQL SERVER 的ADO.NET对象 1.SqlConne ...

  10. IIS新类型文件500错误

    时间过得太久,就真的会忘掉.在这里记录一下吧. 不得已重新安装系统,然后以前的配置都忘掉了.对新类型的文件.geojson 文件报错. 500错误. 首先反复调试MIME类型是否有问题, 再看映射是否 ...