vue单页面锚点定位根据页面浏览的位置定位

本文链接：https://blog.youkuaiyun.com/weixin_40888956/article/details/112387957

本文展示了如何在Vue单页面应用中实现锚点定位。通过使用ElementUI库和自定义CSS样式，创建了一个包含左侧菜单和内容区域的布局。当点击菜单项时，页面会根据所选菜单项自动滚动到对应的内容区域。此外，还提供了Vue实例的配置，包括数据、方法和监听滚动事件的处理。

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

<!DOCTYPE html>
<html lang="en">

<head>
       <meta charset="UTF-8">
       <title>vue单页面锚点定位</title>
       
       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
       <style>
           [v-cloak] {
               display: none;
           }

           * {
               margin: 0;
           }

           .el-tabs--left .el-tabs__nav-wrap.is-left::after,
           .el-tabs--left .el-tabs__nav-wrap.is-right::after,
           .el-tabs--right .el-tabs__nav-wrap.is-left::after,
           .el-tabs--right .el-tabs__nav-wrap.is-right::after {
               height: 100%;
               width: 5px;
               background: #333;
               bottom: auto;
               top: 0;
               left: 0;
           }

           .el-tabs--left .el-tabs__active-bar.is-left,
           .el-tabs--left .el-tabs__nav-wrap.is-left::after {
               left: 0!important;
               width: 6px!important;
           }

           .menus_left_list {
               position: fixed;
               top: 300px;
           }

           .el-main {
               padding: 0;
           }

           .el-container {
               width: 64%;
               margin: 0 auto;
               background: #0e0e0e;
           }

           .el-menu--horizontal {
               float: right;
           }

           .container {
               width: 100%;
               margin: auto;
           }

           .content_list {
               display: flex;
               flex-wrap: wrap;
           }

           .el-tabs__item {
               color: #FFF;
           }

           .header {
               width: 100%;
               height: 107px;
               background: #0e0e0e;
               position: fixed;
               top: 0;
           }

           .el-menu {
               background: #0e0e0e;
           }

           .el-menu.el-menu--horizontal {
               border: 0px;
           }

           .header_con_ {
               width: 84%;
               height: 67px;
               margin: 19px auto;
           }

           .list_href {
               width: 280px;
               height: 130px;
               background: #333333;
           }

           .img_div {
               width: 40px;
               height: 40px;
               background: #FFF;
               overflow: hidden;
               border-radius: 50%;
               margin-left: 27px;
           }

           .Images_ {
               width: 40px;
               height: 40px;
           }

           .list_href_con {
               display: flex;
               align-items: center;
               margin-top: 16px;
           }

           .text_all_ {
               width: 80%;
               margin: 0 auto;
               font-size: 13px;
               color: #fff;
               margin-top: 15px;
           }

           .list_href {
               margin-right: 20px;
               margin-bottom: 20px;
           }

           .h4_ {
               color: #FFF;
               width: 100%;
           }

           .span_Title {
               width: 90px;
               display: inline-block;
               text-align: center;
               border-left: 6px solid #169BD5;
               margin-bottom: 30px;
           }
       </style>
   </head>

                           <el-menu-item index="1">处理中心</el-menu-item>
                           <el-submenu index="2">
                               <template slot="title">我的工作台</template>
                               <el-menu-item index="2-1">选项1</el-menu-item>
                               <el-menu-item index="2-2">选项2</el-menu-item>
                               <el-menu-item index="2-3">选项3</el-menu-item>
                               <el-submenu index="2-4">
                                   <template slot="title">选项4</template>
                                   <el-menu-item index="2-4-1">选项1</el-menu-item>
                                   <el-menu-item index="2-4-2">选项2</el-menu-item>
                                   <el-menu-item index="2-4-3">选项3</el-menu-item>
                               </el-submenu>
                           </el-submenu>
                           <el-menu-item index="3">消息中心</el-menu-item>
                           <el-menu-item index="4">
                               <a href="###" target="_blank">订单管理</a>
                           </el-menu-item>
                           <el-menu-item index="5">消息中心</el-menu-item>
                           <el-menu-item index="6">消息中心</el-menu-item>
                           <el-menu-item index="7">消息中心</el-menu-item>
                           <el-menu-item index="8">消息中心</el-menu-item>
                           <el-menu-item index="9">消息中心</el-menu-item>

                       </el-menu>
                   </div>
               </div>

<el-container style="padding-top: 120px;">
<el-main>

                       <div class="content_list" style="display: flex;">
                           <div class="h4_"><span class="span_Title">每日一览</span></div>
                           <div class="list_href">
                               <div class="list_href_con">
                                   <div class="img_div">
                                       <img src="img/HBuilder.png" alt="" class="Images_" />
                                   </div>
                                   <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                               </div>

                               <div class="text_all_">产品经理、产品爱好者学习交流平台Read more>></div>
                           </div>
                           <div class="list_href">
                               <div class="list_href_con">
                                   <div class="img_div">
                                       <img src="img/HBuilder.png" alt="" class="Images_" />
                                   </div>
                                   <span style="font-size: 13px;color: #fff;margin-left: 30px;">人人都是产品经理</span>
                               </div>