Vue使用Element-UI时点击下一页回到顶部（锚点）

最新推荐文章于 2024-05-30 15:12:12 发布
最新推荐文章于 2024-05-30 15:12:12 发布
阅读量1.9k 收藏 2
点赞数 1
分类专栏： Vue 文章标签： elementui 回到顶部
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41740463/article/details/126526986
版权

        用了很多方法都不起作用，scroll就像死了一样一直是0。最后在<el-backtop>组件中找到他的底层方法，直接调用这个方法可以实现回到顶部，或者说回到任意锚点

 

el-backtop ref="top" style="display:none;" target=".el-main"></el-backtop>

其中的el-main是我实际元素中的

 这个组件有个方法叫handleClick()

 可以通过下面的方法直接触发这个动作。用的时候把.el-main改为其他你想要的class或者id就行，注意这需要在渲染节点之后才能进行

            this.$refs.top.handleClick()

遥远的理想国
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-i18n结合Element-ui的配置方法
10-16
主要介绍了vue-i18n结合Element-ui的配置方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue+element-ui demo
09-29
这是一个vue+element-ui的demo 里面有菜单menu组件，是我做的一个后台管理的模板，用到了route路由转向，以及子父组件方法的调用传参等等，如果是想用vue搭建后台的，可以直接使用 使用方法： cd vue-admin-master-...
Element-ui 组件 backtop回到顶部
weixin_70777902的博客
05-08 558
首先我们可以先去element-ui官网进行查看参数有target：就是元素定义的class类名visibility-height: 鼠标向下滚动到自己定义的数值后出现返回顶部标签right:控制其显示位置，距离页面右边距bottom：控制其显示位置，距离页面左边距。
Vue进阶（八十一）：Vue+element UI 实现“回到顶部”按钮组件
IT全栈 华强工作室
11-05 4277
介绍 这是一个可以快速回到页面顶部的组件，当用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。 使用方法 由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。 使用示例 <template> <div id="app">...
前端scrollIntoView和scrollTo锚点实际项目运用
最新发布
橙子yq的代码世界
05-30 205
scrollTo，scrollIntoView
Element-UI组件实现全局回到顶部功能
实践求真知
08-21 1984
目录 一项目创建步骤 二删除不必要的文件 三删除不必要的代码 四安装element-ui 五启动项目 六测试 七正式编写的代码 八测试效果 九源码地址 一项目创建步骤 1创建项目 vue create ele-components 2选择必要组件 ? Check the features needed for your project: (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Su...
vue如何实现点击分页后页面回顶部
qq_42840904的博客
07-07 565
【代码】vue如何实现点击分页后页面回顶部。
element-ui 之组件BackToTop回到顶部的使用
yhl_nsd的博客
03-17 2739
刚开始我是放在页面最底部，然后使用无效，后面移动到最前面就好了 <div class="layout"> <!--target:指向触发滚动的对象--> <el-backtop target=".layout"> <i class="el-icon-top"></i> </el-backtop> </div> 注意： 1）使用时放在触发滚动的对象里的最前面 2）还是无效时可以选择给触发滚动的对象添加
解决elementUI的对话框(Dialog)组件点击自动跳转到页面顶部问题
weixin_49295874的博客
10-12 1347
<el-dialog :lock-scroll="false" :append-to-body="true" > </el-dialog>
毕业设计项目-个人博客。前端基于Vue，Element-UI和Vue-Element-Admin实现，后台采用SpringBoot+MybatisPlus+Rd
07-09
总的来说，这个毕业设计项目结合了前端的Vue.js、Element-UI和Vue-Element-Admin，以及后端的SpringBoot、MybatisPlus和Redis等技术，构建了一个高效、易用的个人博客系统。这样的技术栈既保证了开发的效率，也确保...
vue+element-ui表格封装tag标签使用插槽
10-15
主要介绍了vue+element-ui表格封装tag标签使用插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
vue-elementui开发采坑-dialog弹框不在顶部
qq_35221272的博客
08-12 1840
解决Dialog弹窗中滚动条不在顶部问题解决Dialog弹窗中滚动条不在顶部问题 问题：打开弹窗后滚动条置于底部 解决：添加append-to-body属性即可解决 append-to-body Dialog自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true <el-dialog title="新增" :visible="visible" append-to-body> </el-dialog> ...
点击<a>标签，禁止页面自动跳到顶部的解决办法
小荷才露尖尖角
08-30 2214
     最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能，但是发现点击按钮后页面总是自动滚动至顶部，这点从用户体验上来讲是极其不爽的，于是开始跳进google大池寻求解决办法。网上的办法有很多，但是唯独下面这个生效了，转来收藏。       "平时开发的HTML表单，链接通常会使用&lt;a href="#" onclick="openWnd();"&gt;Open ne...
vue中滚动条回到顶部的方法
热门推荐
JunVei的博客
09-22 1万+
【代码】vue中滚动条回到顶部的方法。
vue3 页面回到顶部（滚动效果）
weixin_44325341的博客
04-12 6662
要求：1.回到顶部按钮 动态出现 当往下滚动时出现 回到顶部时自动消失 2.动画过渡 不要太生硬 3.点击回到顶部后 滚回顶部 不可以一下子转到顶部 实现效果： 代码实现： html: <li :class="backTopFlag ? 'active' : 'inactive'" @click="backTop"> <i class="icon5"></i> &lt...
vue el-dialog 点击之后滚动条回到顶部
xuxingyuan_的博客
12-19 4912
vue el-dialog 点击之后滚动条回到顶部 记录你当前滚动条的位置 <el-dialog :title="baseTitle" :visible.sync="visible" :before-close="cancelHandle" :close-on-click-modal="false" width="760px" :lock-scroll="false" :append-to-...
vue 给某个div设置回到顶部
未末的博客
12-23 2737
1.对某个div设置了滚动，想要回到顶部的情况 这种情况下一定要找到是在哪个元素下设置的overflow滚动，就在哪个元素下加 方法一.在当前页面无法使用ref获取元素时候，可以使用jq简单实现： 1.安装jq，引入jq import $ from 'jquery' 2.在对应触发时间里写滚动效果 $(".el-main").animate({ scrollTop: 0 }, 100); 方法二.对设置了滚动的元素加ref 然后进行设置 this.$refs.xxx.scrollTop = 0 2.
点击下一页之后，页面自动回滚到顶部
qq_46617584的博客
11-18 452
点击下一页之后，页面自动回滚到顶部
vue使用element-ui 搭建管理后台详细教程
10-23
要使用Element-UI搭建管理后台，首先需要在Vue项目中安装Element-UI。可以通过npm或者yarn命令来安装，具体的安装命令可以在官方文档中找到。 安装完成后，在项目中引入Element-UI。可以在main.js文件中添加以下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值