解释ElementUI的回到顶部功能显示错误的问题

解释ElementUI的回到顶部功能显示错误的问题

参考文章:vue中实现回到顶部功能
vue进入页面时不在顶部,检测滚动返回顶部按钮
文档:Element文档:Backtop 回到顶部


主要是解释这个报错问题,因为直接CtrlCV的话是不行的,具体实现代码可以看底部,中间是解释部分,可能有点小乱
可以在elementui文档里面F12看一下界面的结果
这里主要是用来引用你要进行滚动的那部分的class名称
如图
在这里插入图片描述
具体可以看文档的效果
https://element.eleme.cn/#/zh-CN/component/backtop
我自己代码:
在这里插入图片描述

效果:
在这里插入图片描述
不过做到这里之后你点击一下是没法回到顶部的,因为没加点击事件
点击事件我是引用了这里的:
vue中实现回到顶部功能

在这里插入图片描述
在这里插入图片描述
加完之后就可以点一下回到顶部啦。具体代码是这样的;
另外,加下面这个的原因就是为了隐藏边框出现的滚动条

overflow-x: auto;overflow-y: auto;

 <el-main style="position:relative;">
        <el-row :gutter="20" class="page-component__scroll" style="overflow:hidden;"
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ElementUI并没有提供回到顶部的组件或功能,但你可以使用一些原生的方式来实现。以下是一个简单的实现方式: 1. 在需要回到顶部页面添加一个“回到顶部”的按钮。 ```html <template> <div> <!-- 页面内容 --> <button @click="goTop">回到顶部</button> </div> </template> ``` 2. 在Vue组件中添加方法,使用原生的 `window.scrollTo()` 方法将页面滚动到顶部。 ```javascript <script> export default { methods: { goTop() { window.scrollTo(0,0); } } } </script> ``` 3. 如果需要添加动画效果,可以使用第三方库如`animate.css`来实现。 ```html <template> <div> <!-- 页面内容 --> <button @click="goTop" class="animated infinite pulse">回到顶部</button> </div> </template> ``` ```javascript <script> import 'animate.css'; export default { methods: { goTop() { window.scrollTo(0,0); } } } </script> <style> button { position: fixed; bottom: 20px; right: 20px; display: none; } button.show { display: block; } </style> <script> export default { mounted() { window.addEventListener('scroll', this.scrollHandler); }, beforeDestroy() { window.removeEventListener('scroll', this.scrollHandler); }, methods: { scrollHandler() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop > 100) { this.$refs.backTop.classList.add('show'); } else { this.$refs.backTop.classList.remove('show'); } }, goTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); }, }, }; </script> ``` 以上是一个简单的回到顶部的实现方式,你可以根据需要进行修改。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值