剑阁峥嵘而崔嵬,一夫当关,万夫莫开 🏆 @蜀道难

🔎 了解博主

1. 📢 个人简介: 哈喽！小伙伴们，我是水香木鱼，水瓶座一枚 😜 来自于黑龙江 庆安
2. 🏡 本站首页: 水香木鱼
3. 🎨 系列专栏：后台管理系统
4. 📖 人生格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。
5. 🌏 小目标: 成为前端界、UI视觉界 布道师

📑 文章内容

本次demo 演示，木鱼已将所有代码注释到代码区域。👇样式部分，暂不展示。仅展示主要代码部分。

一、简易版

1、页面定义锚点位置

• @click="goAnchor('#vital1')" 为锚点事件，点击左侧导航，右侧滚动到对应的导航锚点位置。
• 设置锚点时，需添加id（id="vital1"）

<!--侧边栏-->
<ul class="leftSidebar">
  <li class="shapeHand" @click="goAnchor('#vital1')">
     <p class="Sidebar_p">赛季</p>
  </li>
</ul>
<!--设置锚点-->
<div class="anchorSubject" id="vital1">
  <p class="anchor_text">赛季</p>
  <i class="anchor_i"></i>
</div>
<!--锚点下显示的内容-->
<div>展示内容的区域......</div>

2、定义执行的方法

  methods:{
    //锚点跳转
    goAnchor(selector) {/*参数selector是id选择器（#anchor14）*/
      document.querySelector(selector).scrollIntoView({
        behavior: "smooth"
      });
    },
  }

二、高级版

此处为锚点高级版，相关代码注释已标注在代码区域。

1、锚点样式-组件封装

可自定义喜欢的样式

<!--TitleAnchor.vue-->
<template>
    <div class="comTitle">
        <div class="rebox">
            <div class="t1"></div>
            <div class="t2"></div>
            <div class="outTitle">{{ title }}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
        },
    },
};
</script>
<style lang="scss" scoped>
  .rebox{
    display:flex;
    flex-direction: column;
    justify-content: center;
    position: relative
  }
  .t1{
    width: 240px;
    height: 1px;
    background: #b8b2b2
  }
  .t2{
    width: 220px;
    height: 1px;
    background: #6b6b6b;
    margin-top: 6px;
    margin-left: 10px
  }
  .outTitle{
    width: 114px;
    font-size: 16px;
    font-weight: bold;
    background: white;
    padding: 6px;
    position: absolute;
    top: -14px;
    left: calc((100% - 114px)/2);
    text-align: center;
  }
  .comTitle{
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px 0;
  }
</style>

2、页面定义导航

<template>
	<div>
	   <!--锚点导航-->
   		<div class="iconStyle">
    	  <div
       		 class="icon"
      		  v-for="(item, index) in posOpt"
      		  @click="tabClick(item, index)"
      		  :key="index"
     		 >
             <div class="MinIconBox">
               <i :class="item.icon"></i> <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
		<!--展示锚点-->
		<TitleAnchor id="floor0" :title="'内容1'"/>
		<div>展示的内容</div>
		<TitleAnchor id="floor1" :title="'内容2'"/>
		<div>展示的内容</div>
		<TitleAnchor id="floor2" :title="'内容3'"/>
		<div>展示的内容</div>
		<TitleAnchor id="floor3" :title="'内容4'"/>
		<div>展示的内容</div>
	</div>
</template>
<script>
import TitleAnchor from "../components/TitleAnchor.vue";
export default {
   components: {
      TitleAnchor,
   },
   data() {
      return {
           posOpt:[
                    {name:"内容1",code:0,icon:"el-icon-pie-chart"},
                    {name:"内容2",code:1,icon:"el-icon-pie-chart"},
                    {name:"内容3",code:2,icon:"el-icon-pie-chart"},
                    {name:"内容4",code:3,icon:"el-icon-pie-chart"},
            ],
       }
   },
   methods: {
          //Tba点击
          tabClick(item,index){
               //判断code 状态 ，如果等于0，点击后就滑动到id为(#floor0)的锚点内容区域，也就是根据code状态码 展示对应的锚点
                if(item.code ==0){
                    this.goAnchor('#floor0');
                }else if (item.code ==1) {
                    this.goAnchor('#floor1');
                }
                else if (item.code ==2) {
                    this.goAnchor('#floor2');
                }else{
                    this.goAnchor('#floor3');
                }
            },
            //锚点跳转
            goAnchor(selector) {
                var anchor = this.$el.querySelector(selector);//获取元素
                let total;
                let disFixed =document.getElementsByClassName("vux-fixed")[0];
                if(disFixed){
                    total = anchor.offsetTop-40;
                }else{
                    total = anchor.offsetTop-80;
                }
                let distance = document.documentElement.scrollTop || document.body.scrollTop;
                // 计算每一小段的距离
                let step = total/6;
                (function smoothDown () {
                    if (distance < total) {
                        distance += step;
                        // 移动一小段
                        document.body.scrollTop = distance;
                        document.documentElement.scrollTop = distance;
                        // 设定每一次跳动的时间间隔为10ms
                        setTimeout(smoothDown, 10)
                    } else {
                        // 限制滚动停止时的距离
                        document.body.scrollTop = total;
                        document.documentElement.scrollTop = total
                    }
                })()

            },
   }
}
</script>
<style lang="less" scoped>
// 锚点样式
.iconStyle {
  list-style: none;
  position: fixed;
  padding: 10px 10px 10px 10px;
  top: 40%;
  right: -112px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: -1px 2px 5px #d5cfcf;
  font-size: 8px;
  font-weight: 400;
  color: #273356;
  transition: 0.5s;
  .icon {
    width: 100%;
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid #d9d9d9;
    .MinIconBox {
      width: 140px;
      display: flex;
      align-items: center;
      i {
        width: 30px;
        font-size: 23px;
        margin-left: 10px;
      }
      span {
        font-size: 16px;
      }
    }
  }
  .icon :hover {
    color: #fff;
    background-color: #1890ff;
  }
}
// 鼠标移入效果
.iconStyle:hover {
  right: 0;
}
</style>

---

博主致谢

非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了vue快速实现锚点功能【简单版与高级版】，希望可以帮到大家，谢谢。

👉 如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟

😛 您的支持就是我更新的最大动力。👇

---

往期精彩

前端vue实现高级检索小案例

前端vue项目最强优化-美化浏览器右侧滚动条样式与el-scrollbar

UI设计指南之可视化大屏【快速理解版】

前端css解决背景图、图片自适应的问题【通用】

前端echarts大小屏自适应与自定义Tab切换hover效果