vue实现一键回到顶部

需求：滚动到一定距离返回到顶部（完整代码在文章最后）

HTML代码

  <div style="height:3000px">内容......<div id="btnBox" class="top" @click="goBack">⬆️</div></div>

（1）监听滚动事件：利用 vue 写一个在控制台打印当前的 scrollTop。在 mounted 钩子中给 window 添加一个滚动滚动监听事件

mounted () {window.addEventListener('scroll', this.scrollToTop)
},

（2）然后在方法中，添加这个 scrollToTop 方法

scrollToTop() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;console.log('距离顶部的距离:'+scrollTop)
}

（3）控制台打印结果

（4）监听回到顶部按钮距浏览器顶部的距离，设置『回到顶部』图标显隐

scrollToTop(el) {let topBtn = document.getElementById('to-top-btn');let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;let browserHeight = window.outerHeight;if (scrollTop > browserHeight) {topBtn.style.display = 'block';} else {topBtn.style.display = 'none';}
}

（5）离开该页面需要移除这个监听的事件，不然会报错

destroyed () {window.removeEventListener('scroll', this.scrollToTop);
}

完整代码如下

<template><div style="height:3000px">内容......<div id="btnBox" class="top" @click="goBack">⬆️</div></div>
</template><script>
export default {data() {return {};},methods: {// 回到顶部操作goBack() {document.documentElement.scrollTop = 0;},//监听回到顶部按钮距浏览器顶部的距离scrollToTop() {// 获取dom元素idlet topBtn = document.getElementById("btnBox");var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;console.log("距离顶部的距离:" + scrollTop);// 判断距离顶部多少显示回到顶部图标if (scrollTop > 500) {topBtn.style.display = "block";} else if (scrollTop < 500) {topBtn.style.display = "none";}},//离开该页面需要移除这个监听的事件，不然会报错;destroyed() {window.removeEventListener("scroll", this.scrollToTop);},},mounted() {// 侦听事件并处理相应函数window.addEventListener("scroll", this.scrollToTop);},
};
</script><style>
#btnBox {position: fixed;bottom: 50px;right: 40px;font-size: 30px;display: none;
}
</style>

实现效果

vue实现一键回到顶部相关推荐

告别繁琐滑动，微信小程序一键回到顶部功能
前言在日常使用微信小程序时,你是否曾经遇到过翻页疲劳的问题?或者在滑动页面时不断滑动才能回到顶部的尴尬情况?如果是这样,那么你一定不想错过今天的文章.我将为大家介绍一种简单而实用的方法,让你轻松实现 ...
vue3一键回到顶部方法
引入组件文件写一个文件放在components里面在需要时进行调用它但是呢 vue3当中怎么拿到呢请往下看 ============== content 这个文件是放在component的文件 ...
vue项目实现回到顶部的两种超简单方法
vue 中实现回到顶部的两种方式: (1)锚点方式通过点击锚点回到指定位置: <template><div id="topAnchor" ref="f ...
基于Vue项目的回到顶部插件
在形目中经常要实现回到顶部的效果,所以我在这做了一个回到顶部的插件. 首先,我们先在这说明一下,实现回到顶部的效果所要满足的要求为:要实现回到顶部效果的盒子必须出现横向滚动条. 子组件如下所示: 原理 ...
Vue项目页面回到顶部
实现的方法: 一.借助element-plus框架的Backtop回到顶部组件(点击按钮缓慢回顶部) 注意:这个组件想显示出来,必须放到产生滚动效果的元素内部,且是放到最上面!所以必须明确是哪个元素有 ...
html一键回到顶部,HTML实现简单大方的 “返回顶部” 实例代码
简单的"返回顶部"效果 .cs{ width:50px; height:100px; background-color: #F0F0F0; border:1px solid #D9 ...
Android | ListView、RecyclerView 实现一键回到顶部
一.ListView 1.定义 /*** 列表视图*/private ListView lvPhotoList;/*** 滑动到顶部按钮*/private FloatingActionButton f ...
使用scrollTop回到顶部时间
锚链接使用锚链接方式实现回到顶部效果,是最简便的一种方式,即将标签a中的href属性值设置为#即可:,便可实现一键回到顶部效果.为了提供较好的用户体验,这里使用js实现这个功能. 功能点 1.返回顶 ...
微信小程序回到顶部的两种方式
一,使用view形式的回到顶部 HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus} ...
Vue+element UI实现“回到顶部”按钮组件
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/caomage/article/details/85006973 背景开发框架是vue+webpac ...

vue实现一键回到顶部

需求：滚动到一定距离返回到顶部（完整代码在文章最后）

完整代码如下

实现效果

vue实现一键回到顶部相关推荐

最新文章

热门文章