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
    评论
专栏目录
Element-ui 组件 backtop回到顶部
weixin_70777902的博客
05-08 563
首先我们可以先去element-ui官网进行查看参数有target：就是元素定义的class类名visibility-height: 鼠标向下滚动到自己定义的数值后出现返回顶部标签right:控制其显示位置，距离页面右边距bottom：控制其显示位置，距离页面左边距。
Vue进阶（八十一）：Vue+element UI 实现“回到顶部”按钮组件
IT全栈 华强工作室
11-05 4278
介绍 这是一个可以快速回到页面顶部的组件，当用户浏览到页面底部的时候，通过点击按钮，可快速回到页面顶部。 使用方法 由于该组件是基于element-UI进行二次封装的，所以在使用该组件时请务必安装element-UI，安装好element-UI后，只需将该组件文件夹BackToTop导入到现有项目中即可使用。 使用示例 <template> <div id="app">...
前端scrollIntoView和scrollTo锚点实际项目运用
最新发布
橙子yq的代码世界
05-30 209
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 569
【代码】vue如何实现点击分页后页面回顶部。
解决elementUI的对话框(Dialog)组件点击自动跳转到页面顶部问题
weixin_49295874的博客
10-12 1347
<el-dialog :lock-scroll="false" :append-to-body="true" > </el-dialog>
vue el-dialog 点击之后滚动条回到顶部
xuxingyuan_的博客
12-19 4913
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，Element-UI和Vue-Element-Admin实现，后台采用SpringBoot+MybatisPlus+Rd
07-09
总的来说，这个毕业设计项目结合了前端的Vue.js、Element-UI和Vue-Element-Admin，以及后端的SpringBoot、MybatisPlus和Redis等技术，构建了一个高效、易用的个人博客系统。这样的技术栈既保证了开发的效率，也确保...
vue-i18n结合Element-ui的配置方法
10-16
主要介绍了vue-i18n结合Element-ui的配置方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue+element-ui表格封装tag标签使用插槽
10-15
主要介绍了vue+element-ui表格封装tag标签使用插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+element-ui demo
09-29
这是一个vue+element-ui的demo 里面有菜单menu组件，是我做的一个后台管理的模板，用到了route路由转向，以及子父组件方法的调用传参等等，如果是想用vue搭建后台的，可以直接使用 使用方法： cd vue-admin-master-...
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
点击下一页之后，页面自动回滚到顶部
qq_46617584的博客
11-18 454
点击下一页之后，页面自动回滚到顶部
vue中滚动条回到顶部的方法
JunVei的博客
09-22 1万+
【代码】vue中滚动条回到顶部的方法。
vue 给某个div设置回到顶部
未末的博客
12-23 2740
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.
vue+element-ui 回到顶部组件backTop
weixin_42598901的博客
08-16 1万+
<template> <div class="wraper"> <template> Scroll down to see the bottom-right button. <el-backtop target=".wraper"> &l...
解决vue页面跳转之后，页面没有回到顶部的问题
逆风优雅的博客
01-19 1981
问题展示： 解决方法：使用路由的前置钩子(路由守卫) router.beforeEach((to, from, next) => { // 路由跳转后，让页面回到顶部 // chrome document.body.scrollTop = 0; // firefox document.documentElement.scrollTop = 0; // safari window.pageYOffset = 0; // 调用 next()，一定要调用 next 方法，否则钩
vue项目实现回到顶部的两种超简单方法
热门推荐
sinat_33255495的博客
03-29 2万+
vue 中实现回到顶部的两种方式： （1）锚点方式 通过点击锚点回到指定位置： <template> <div id="topAnchor" ref="faultTree" class="wrap"> <a id="TOPUp" href="#topAnchor"> <img style="width: 100%;height: 100%;" src="../../../../assets/top.png" alt="">
vue实现回到顶点
xc9711的博客
07-05 496
对于前端回到顶点顶部的其实应该分为两类，一类是整体页面进行滑动，而一类是固定住了其中一个div或其他的大小，滚动只在一个范围进行滚动，而不是整个页面进行滚动。 但是，在查找资料，发现很多都是只对整体页面进行滚动回到顶点，这不是我想要的； 于是，在下方我会归类出两个： 整体页面滚动回到顶点 获取滚动高度 要使得整体页面滚动回到顶点，首先，就需要获取你滚动的高度 于是可以定义一个变量，写成以下： 实例 局部区域滚动回到顶点 与整体页面滚动不同，局部区域进行滚动回到顶点，不是获取整体页面的滚动高度了，而是那个
vue使用element-ui 搭建管理后台详细教程
10-23
Vue.js是一款流行的JavaScript框架，它的灵活性和易用性使其成为构建用户界面的首选工具。Element-UI则是一个基于Vue.js的一套桌面端UI组件库，它提供了丰富的UI组件，使得搭建管理后台变得更加简单。 要使用Element-UI搭建管理后台，首先需要在Vue项目中安装Element-UI。可以通过npm或者yarn命令来安装，具体的安装命令可以在官方文档中找到。 安装完成后，在项目中引入Element-UI。可以在main.js文件中添加以下代码来全局引入Element-UI的样式和组件： ``` import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 接下来就可以在Vue组件中使用Element-UI的组件了。例如，可以在组件的模板中添加一个按钮： ``` <el-button>点击我</el-button> ``` 使用Element-UI的组件和样式，可以轻松实现页面的布局和美化。其中包括菜单、表格、表单、弹窗等各种常用的管理后台组件。 Element-UI还提供了丰富的交互和功能组件，例如消息提示、弹窗确认框、分页等。可以根据具体需求在组件中使用这些功能。 在搭建管理后台时，还可以利用Element-UI的路由和菜单组件来实现页面的导航。可以通过路由配置文件来定义不同页面的路由路径，然后在菜单组件中使用路由链接来跳转到不同的页面。 总之，使用Element-UI搭建管理后台是非常简单和高效的。通过引入Element-UI的样式和组件，可以快速搭建出功能丰富、界面美观的管理后台。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值