vue 항목은 내비게이션을 클릭하여 해당 위치로 슬라이드합니다.

scrollIntoView()호출하는 요소를 브라우저 창의 보이는 영역으로 스크롤하는 Utilize 메서드
참고: 이 메서드는 페이지를 스크롤할 수 있는 경우에만 유용합니다.

methods:{
    
    
    go(){
    
    
      document.getElementById("show").scrollIntoView({
    
     behavior: 'smooth' });
    }
  }

scrollInteView 메소드의 매개변수는 다음과 같이 구성됩니다

.

<template>
  <div class="container">
    <div class="nav">
      <ul>
        <li
          v-for="(item, index) in state.navData"
          :key="item"
          @click="go(index)"
        >
          {
    
    {
    
     item }}
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </div>
</template>
<script setup>
import {
    
     reactive } from "vue";
const state = reactive({
    
    
  navData: [1, 2, 3, 4],
});
const go = (index) => {
    
    
  var items = document.querySelectorAll(".item");
  //缓慢移动至目标位置
  items[index].scrollIntoView({
    
     behavior: "smooth" });
};
</script>

효과: