Vue3-el-dialog界面太长，快捷回到顶部、底部，增加按钮

最新推荐文章于 2025-07-09 09:39:30 发布

摆烂小唐

最新推荐文章于 2025-07-09 09:39:30 发布

阅读量327

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53621870/article/details/146946808

首先在最外层绑定id

下面是调用的方法

回到顶部
goBackTop() {
  this.$nextTick(() => {
    const dialogEl = document.getElementById('dialogId');//获取id
    if (dialogEl) {
      const scrollContainer = dialogEl.querySelector('.el-dialog__body');
      if (scrollContainer) {
        scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
      }
    }
  });
},

//回到底部
goToBottom() {
  this.$nextTick(function () {
    const dialogEl = document.getElementById('dialogId');
    if (dialogEl) {
      const dialogHeight = dialogEl.offsetHeight
      const scrollContainer = dialogEl.querySelector('.el-dialog__body');
      if (scrollContainer) {
        scrollContainer.scrollTo({ top: dialogHeight, behavior: 'smooth' });
      }
    }
});
},