【vue Element 导航表单】点击导航栏实现网页滚动到指定位置

最新推荐文章于 2024-07-23 12:05:48 发布

不会有人真的学前端吧

最新推荐文章于 2024-07-23 12:05:48 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue学习 js 文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/fun_kunkun/article/details/122456419

Vue学习同时被 2 个专栏收录

7 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了一种在点击顶部导航时使页面平滑滚动到指定位置的方法。通过使用JavaScript，可以实现点击导航项时页面优雅地滚动到相应部分，提供更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求：点击顶部的导航滑动到指定的位置

点击顶部导航选项：

顶部导航代码：

<el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in tablist"
          :key="index"
          :label="item.label"
          :name="item.name"
         >
         </el-tab-pane>
</el-tabs>

表格代码

点击导航方法：

// 切换tabs
    handleClick(tab, event) {
        var el = document.querySelector(`#${tab.name}`);
        window.scroll({ 
          top: el.offsetTop,
          behavior: "smooth" // 平滑过渡
        });
        
    },

总结：

一开始我是使用scrollIntoView方法滑动的，但是这是基于祖先的位置来进行滑动的，有点懒得进行修改了..

   this.$el.querySelector(`#${tab.name}`).scrollIntoView({
         behavior: "smooth", // 平滑过渡
         block: "start", // 上边框与视窗顶部平齐。默认值
   });