vue3 点击目录内容滚动到最顶部

最新推荐文章于 2024-06-20 10:50:31 发布

m0_61134931

最新推荐文章于 2024-06-20 10:50:31 发布

阅读量532

点赞数 8

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_61134931/article/details/135609576

版权

本文介绍了如何使用Vue.js构建一个具有动态目录的网页，点击目录项时平滑滚动到对应的内容区域。代码展示了利用ref和事件监听实现导航及滚动效果的实现过程。

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

<template>
    <div>
      <ul class="directory">
        <li v-for="item in directory" :key="item.id" @click="scrollToSection(item.id)">
          {{ item.title }}
        </li>
      </ul>
  
      <div ref="pageContent" class="page-content">
        <div v-for="section in directory" :key="section.id" :id="section.id" class="section">
          <h2>{{ section.title }}</h2>
    
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  const pageContent = ref(null);
      const directory = [
        { id: 'section1', title: '标题 1' },
        { id: 'section2', title: '标题 2' },
        { id: 'section3', title: '标题 3' },
        // ... 其他目录项
      ];
  
      const scrollToSection = (sectionId) => {
        console.log(sectionId);
        const targetSection = pageContent.value.querySelector(`#${sectionId}`);//"这个id不能时数字"
        console.log(targetSection);
        if (targetSection) {
          targetSection.scrollIntoView({ behavior: 'smooth' });
        }
      };
  </script>
  
  <style>
  .directory {
    list-style: none;
    padding: 0;
  }
  
  .directory li {
    cursor: pointer;
    margin-bottom: 5px;
  }
  
  .page-content {
    padding: 20px;
    
  }
  
  .section {
    margin-bottom: 40px;
    height: 1000px;
    background-color: pink;
  }
  </style>

点击标题2