返回顶部组件的实现

最新推荐文章于 2023-01-02 16:46:22 发布
最新推荐文章于 2023-01-02 16:46:22 发布
阅读量418 收藏
点赞数 1
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64969829/article/details/122310018
版权
本文介绍了两种在Vue.js中实现返回顶部组件的方法。一种是使用原生的DOM操作，另一种则是通过`this.$refs`来引用元素。详细步骤包括在页面上创建返回顶部的div，设置页面载入和销毁时的监听事件，以及编写回到顶部和控制显示隐藏的事件。另外，还提到了通过`this.$refs.home`直接获取DOM节点的方式。
摘要由CSDN通过智能技术生成

返回顶部组件的步骤

有两种写法一种是原生的还有一种可以用this.$refs.home

第一种：

1.首先需要写点击返回顶部的div

代码如下（示例）：

<span class="hui" v-show="huiShow" @click="huiTop">回到顶部</span>

2.页面载入时和页面销毁时的监听事件

 mounted(
最低0.47元/天 解锁文章
@柠稔
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue - 详细实现返回顶部组件，PC 端 / 移动端均适用（下滑页面到一定距离出现按钮，点击后返回顶部）
王佳斌
08-19 1855
Vue - 返回顶部组件，PC 端 / 移动端均适用（下滑页面到一定距离出现按钮，点击后返回顶部），vue 返回顶部组件封装，用vue封装一个返回顶部的按钮组件goTop，vue中返回顶部封装的组件 滚动一定位置显示隐藏，vue 向下滑动显示返回按钮,点击按钮返回顶部，Vue实现回到顶部功能(附带页面滑动一段距离后显示按钮)，vue移动端页面返回顶部，Vue组件(点击返回顶部)，回到顶部功能组件，nuxt返回顶部功能，回到顶部。
BackToTop “返回顶部” 页面组件
04-16
NULL 博文链接：https://newlinuxjava.iteye.com/blog/1779419
回到顶部组件
wenjiusui8083的博客
01-13 854
回到顶部--组件 1.html 一个button足矣返回顶部 2.css 注意：position:fixed ,只要是相对于浏览器屏幕位置的就是fixed，固定布局 .back-to-top{ position: fixed; bottom: 30px; right: 30px; border:1px solid #888; } 3.js ;$(function() {
vue 之返回顶部组件
weixin_47409897的博客
02-08 279
目录vue 之返回顶部组件backTop/BackTop.vue使用返回顶部组件 vue 之返回顶部组件 backTop/BackTop.vue <template> <transition :name="transitionName"> <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop"> <svg width="16"
【Vue】回到顶部组件
最新发布
wlc19981111的博客
01-02 232
Vue：回到顶部组件。
写一个回到顶部的小组件
chen1057376155的博客
04-26 373
首先，先介绍这个组件的大致结构! http://img.blog.csdn.net/20160426153218789，然后详细介绍一下js部分1第一步window.onload部分，是用来触发事件的window.onload=function(){ var backTopbt=document.getElementById("backTop");
封装返回顶部组件
XiehaiyanLI的博客
09-24 248
封装一下返回顶部吧，这个在实际开发中用到的地方很多，看一下具体实现代码吧 父页面引入注册子组件 <template> <div class="home"> <Gotop/> </div> </template> <script> // @ is an alias to /src import Gotop from "@/components/Gotop.vue"; export default { name:
Vue实现一个返回顶部backToTop组件
08-29
Vue 实现返回顶部 backToTop 组件 本篇文章主要介绍了 Vue 实现一个返回顶部 backToTop 组件，可以实现回到顶部效果，具有一定的参考价值，有兴趣的可以了解一下。 知识点 1: Vue 组件的封装 在 Vue 中，组件的...
vue实现移动端返回顶部
10-14
第二个实现方法同样创建了一个名为`scrollTop`的组件，它包含一个返回顶部按钮，但按钮的显示与否是根据页面是否滚动超过200像素来判断的。这个判断是在`handleScroll`方法中完成的，该方法监听窗口的滚动事件。当`...
最好的回到顶部插件gotoTop.js实例
01-04
最好的回到顶部插件gotoTop.js实例:http://blog.csdn.net/libin_1/article/details/50453294
scrollTop原生JavaScript实现的回到顶部库
08-10
scrollTop 原生 JavaScript 实现的回到顶部库，适应 PC 和移动，兼容到 IE7
原生JS实现平滑回到顶部组件
10-22
下面是一个简洁的原生JS实现返回顶部组件的示例： ```javascript var BackTop = function (domE, distance) { if (!domE) return; var _onscroll = window.onscroll, _onclick = domE.onclick; window....
vue 返回滚动条顶部组件_vue实现返回顶部组件
weixin_31596631的博客
01-30 625
当页面滚动超过一屏时，显示回到顶部按钮，点击回到顶部src/components/scroll/index.vueimport { Swiper,SwiperSlide } from'vue-awesome-swiper';import'swiper/css/swiper.css';import MeLoading from'components/loading';exportdefault{na...
vue回到顶部组件
大桶爆米花eee
12-29 1288
html &lt;template&gt; &lt;a href="javascript:;" class="toTop" @click="backTop" v-show="backToTop"&gt; &lt;i class="iconfont"&gt;&amp;#xe65d;&lt;/i&gt; &lt;/a&
HTML 返回顶部的样式
weixin_30367169的博客
04-22 515
.fhdb{ width:50px; height:50px; position:fixed; //可以用来定义元素的固定定位。 right:20px; //距离右侧20像素 bottom:20px} //距离底部20像素 具体参考：http://www.w3school.com.cn/cssref/pr_class_position.asp 转载于:https:...
vue封装返回顶部组件【cv可用】
在写作的路上持续输出。
09-07 824
vue封装返回顶部组件【cv可用】
Web前端：常用组件3.返回顶部
Sher_H的博客
02-24 501
3.返回顶部 （1）拖动一定程度显示返回部件：       点击返回顶部：    &nbsp; &nbsp; （2）实现效果：点击后返回顶部，部件消失 &nbsp; &nbsp; （3）代码实现： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;
Vue封装返回顶部组件：动画与兼容性详解
本文档详细介绍了如何在Vue框架中实现一个可自定义的返回顶部（backToTop）组件。...通过这篇文章，开发者不仅能够学会如何在Vue中创建实用的返回顶部组件，还能提升自己的前端技术栈和组件化开发能力。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值