vue + element ui 实现锚点定位

vue + element ui 实现锚点定位

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

vue

<el-row :gutter="20">
			<el-col :span="3">
				<!--导航选择事件-->
				<el-menu :default-active="activeStep" @select="jump">
					<el-menu-item v-for="(item,index) in menuData" :index="`${index}`" :key="item.subjectId">
						<i class="el-icon-menu"></i>
						<span slot="title">{{item.subjectName}}</span>
					</el-menu-item>
				</el-menu>
			</el-col>
			<!--绑定scroll事件需要监听-->
			<el-col :span="21" class="scroll_cls" @scroll="onScroll">
				<div v-for="(item,index) in tableObject" :key="index" style="height:500px">
					<div class="title scroll-item" :id="item.name">{{item.name}}</div>
					<el-table :data="item.rows" :key="index">
						<el-table-column label="序号" type="index" width="50"></el-table-column>
						<el-table-column prop="channelId" label="渠道/团队id"></el-table-column>
						<el-table-column prop="channelName" label="渠道/团队"></el-table-column>
						<el-table-column prop="ruleCode" label="分配方案id"></el-table-column>
						<el-table-column prop="ruleName" label="分配方案名称"></el-table-column>
						<el-table-column prop="ruleVersion" label="版本号"></el-table-column>
						<el-table-column prop="hierarchy" label="级别">
							<template slot-scope="scope">
								<span>{{scope.row.hierarchy == 1 ? '项目' : '渠道团队'}}</span>
							</template>
						</el-table-column>
						<el-table-column label="有效期">
							<template slot-scope="scope">
								<span>{{scope.row.beginTime + '-' + scope.row.endTime}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="creatorName" label="操作人"></el-table-column>
						<el-table-column prop="createTime" label="操作时间"></el-table-column>
						<el-table-column prop="orderCnt" label="关联订单">
							<template slot-scope="scope">
								<el-button
									@click="orderHandleClick(scope.row.orderCnt)"
									type="text"
									size="small"
								>{{scope.row.orderCnt}}</el-button>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button @click="settingHandleClick(scope.row)" type="text" size="small">设置分配方案</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						v-if="item.total > 5"
						style="margin-top: 15px"
						size="small"
						@size-change="handleSizeChange($event,index)"
						@current-change="handleCurrentChange($event,index)"
						:current-page="ruleForm.ageNum"
						:page-sizes="[10, 30, 50, 100]"
						:page-size="ruleForm.pageSize"
						layout="total, sizes, prev, pager, next"
						:total="item.total"
					></el-pagination>
				</div>
			</el-col>
		</el-row>

js

// 滚动触发按钮高亮
methods: {
		onScroll(e) {
            let scrollItems = document.querySelectorAll(".scroll-item");
            console.log(scrollItems)
            console.log(e)
			for (let i = scrollItems.length - 1; i >= 0; i--) {
				// 判断滚动条滚动距离是否大于当前滚动项可滚动距离
				let judge =
					e.target.scrollTop >=
					scrollItems[i].offsetTop - scrollItems[0].offsetTop;
				if (judge) {
                    console.log(i)
					this.activeStep = i.toString();
					break;
				}
			}
		},
		jump(index) {
            console.log(index)
			let target = document.querySelector(".scroll_cls");
			let scrollItems = document.querySelectorAll(".scroll-item");
			// 判断滚动条是否滚动到底部
			if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
                console.log(index)
                console.log(typeof index)
				this.activeStep = index;
			}
            let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop; // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
            console.log(total)
            let distance = document.querySelector(".scroll_cls").scrollTop; // 滚动条距离滚动区域顶部的距离
            console.log(distance)
			// let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
			// 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
			// 计算每一小段的距离
			let step = total / 50;
			if (total > distance) {
				smoothDown(document.querySelector(".scroll_cls"));
			} else {
				let newTotal = distance - total;
				step = newTotal / 50;
				smoothUp(document.querySelector(".scroll_cls"));
			}

			// 参数element为滚动区域
			function smoothDown(element) {
				if (distance < total) {
					distance += step;
                    element.scrollTop = distance;
					setTimeout(smoothDown.bind(this, element), 10);
				} else {
					element.scrollTop = total;
				}
			}

			// 参数element为滚动区域
			function smoothUp(element) {
				if (distance > total) {
					distance -= step;
					element.scrollTop = distance;
					setTimeout(smoothUp.bind(this, element), 10);
				} else {
					element.scrollTop = total;
				}
			}

			document.querySelectorAll('.scroll-item').forEach((item, index1) => {
			  if (index === index1) {
			    item.scrollIntoView({
			      block: 'start',
			      behavior: 'smooth'
			    })
			  }
			})
		},
		},
	mounted() {
       this.$nextTick(() => {
           console.log(1)
           window.addEventListener('scroll', this.onScroll,true)
       })
    },

css

.scroll_cls {
    height: 500px;
	overflow: auto;
}

转载自：原文链接点击这里