vue实现目录锚点且滚动到指定区域时锚点自动回显—

vue实现目录锚点且滚动到指定区域时锚点自动回显——双向锚点

news2025/7/19 5:49:35

最近在用vue写官网，别问我为什么用vue写官网，问就是不会jq。。。。vue都出现11年了。。。

左侧目录：点击时，右侧区域可以自动滚动到指定的位置。
在这里插入图片描述
右侧区域手动滚动时，左侧锚点可以自动切换到对应的目录上

从而实现双向锚点的功能：

直接上代码：

解决步骤1：左侧锚点部分

<div class="leftFixed">
			<div @click="goId('shouyeId')" :class="[currentId == 'shouyeId' ? 'activeCls' : '']">我的首页</div>
			<div @click="goId('gongchangId')" :class="[currentId == 'gongchangId' ? 'activeCls' : '']">工厂展示&档案</div>
			<div @click="goId('chanxianId')" :class="[currentId == 'chanxianId' ? 'activeCls' : '']">产线展示</div>
			<div @click="goId('gongyiId')" :class="[currentId == 'gongyiId' ? 'activeCls' : '']">工艺能力&制程</div>
			<div @click="goId('chanpinId')" :class="[currentId == 'chanpinId' ? 'activeCls' : '']">产品展示</div>
			<div @click="goId('tixiId')" :class="[currentId == 'tixiId' ? 'activeCls' : '']">体系认证</div>
			<div @click="goId('pingjiaId')" :class="[currentId == 'pingjiaId' ? 'activeCls' : '']">用户评价</div>
		</div>

对应的css代码：

<style lang="less" scoped>
.leftFixed {
	position: fixed;
	top: 100px;
	left: 110px;
	background: #fff;
	padding: 16px;
	display: flex;
	flex-direction: column;

	div {
		padding: 5px 0;
		padding-left: 20px;
		cursor: pointer;

		&.activeCls {
			color: #1f833b;
			font-weight: bold;
			position: relative;

			&:before {
				content: "";
				/* 使用空内容 */
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 0;
				width: 0;
				height: 0;
				border-top: 5px solid transparent;
				/* 控制箭头的上半部分 */
				border-bottom: 5px solid transparent;
				/* 控制箭头的下半部分 */
				border-left: 10px solid #1f833b;
				/* 控制箭头的右侧，创建箭头效果 */
			}
		}
	}
}
</style>

对应的js代码：

goId(id) {
	document.getElementById(id).scrollIntoView();
	this.currentId = id;//用于显示当前指定的目录
},

解决步骤2：右侧区域滚动后左侧自动回显

在mounted方法中写以下代码：

if(document.getElementById("content_wrap")){
	window.addEventListener(
	"scroll",
	() => {
		let elements = document.getElementById("content_wrap").querySelectorAll("[id]"); // 获取所有有ID的元素
		let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
		let closestElement = null;
		let closestDistance = Infinity;

		elements.forEach((element) => {
			let distance = Math.abs(element.getBoundingClientRect().top - scrollPosition);
			if (distance < closestDistance) {
				closestDistance = distance;
				closestElement = element;
			}
		});

		if (closestElement && closestElement.id && typeof closestElement.id == "string") {
			this.currentId = closestElement.id;
			console.log("Closest element to the top of the viewport is:", closestElement.id);
		}
	},
	{ passive: true, capture: true }
); // 使用捕获阶段和标记为 passive 以提高性能
}