利用vue实现点击导航栏定位到某个元素时，能够平滑滚动

最新推荐文章于 2024-05-16 17:19:28 发布

汤圆真的好可爱

最新推荐文章于 2024-05-16 17:19:28 发布

阅读量1.6k

点赞数 1

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_41083105/article/details/117712357

版权

本文介绍了如何使用Vue实现导航栏点击后平滑滚动到相应内容区域，只需几行关键代码，包括使用scrollIntoView函数，设置behavior为'smooth'。通过这种方法，既能实现导航栏的定位，又能提供平滑的用户体验。

摘要由CSDN通过智能技术生成

其实方法很简单，也是走了很多弯路，见别人用的各种方法，但是自己都实现不了，等到实现的时候才发现原来如此简单，只需要几句代码即可。

做的是对bilibili首页仿写的一个小项目，虽然很简陋就是了。

下面上一下页面的截图：

功能很简单，点击右侧导航栏能够跳转到对应位置的内容分类上，同时右侧导航栏的点击之后将变色。

首先先看一下比较生硬的效果是什么样的：

这个是平滑的效果：

其实最最关键的代码只有几句，现贴出来如下：

jump(index) {
      this.jumpid = index; //用于点击右侧导航栏的时候，选中部分显示背景色
      let jumpitem = document.getElementsByName("jumpitem"); //得到所有的title，包括游戏，音乐，番剧这些
      jumpitem[index].scrollIntoView({
        behavior:'smooth',
        block:'start'
      });
    },

其中，函数scrollIntoView起了决定性的作用。

behavior要写成smooth

block可以写start，也可以是end，当然，默认是start

完整代码：

<template>
  <div class="content">
    <div class="dh" name="jumpitem" ref="content1" :id="'id'+index">动画</div>
    <div class="donghua">
      <ul class="firstPart">
        <li v-for="(item, index) in list" :key="index">
          <a href=""