jquery锚点定位

article/2025/8/23 19:15:36

jquery实现锚点定位功能

这里主要是通过jquery实现了一个简单的滚动触发锚点高亮，以及点击锚点触发滚动的功能
$leftnav为左侧楼层导航栏(left-nav)，右侧right-content-body为滚动区域。主要是利用了scrollTo()和对滚动区域scroll事件的监听实现锚点定位及锚点高亮。先附上代码

在这里插入图片描述

var $leftnav = $('.form-content .buildings-room-info div.left-nav');$.each(header_info.floor, (index, item) => {$leftnav.append(`<span id="floor_${item}" ${index === 0 && 'class=selected'}>${item}F</span>`);});// 绑定点击事件，切换背景色$leftnav.on("click", function (e) {if (e.target.localName === 'span' && e.target.id !== 'span_title') {// e.target.id !== 'span_title' && $(e.target).addClass('selected').siblings().removeClass('selected');// 滚动到指定楼层，滚动时长1s$('.form-content .buildings-room-info .right-content .right-content-body').scrollTo('#' + e.target.id, 1000);var scrollHeight = $('.form-content .buildings-room-info .right-content .right-content-body')[0].scrollHeight;var scrollTop = $('.form-content .buildings-room-info .right-content .right-content-body')[0].scrollTop;var height = $('.form-content .buildings-room-info .right-content .right-content-body').height();// 判断滚动条是否到达底部if (scrollTop + height === scrollHeight) {$(e.target).addClass('selected').siblings().removeClass('selected');}}});// 监听滚动区域的滚动，动态切换左侧导航栏(重点)$('.form-content .buildings-room-info .right-content .right-content-body').scroll(() => {// var scrollTop = $scrollContent.scrollTop()for (var i = 0; i < header_info.floor.length; i++) {if ($('.form-content .buildings-room-info .right-content .right-content-body #floor_' + header_info.floor[i]).offset().top <= 206 && $('.form-content .buildings-room-info .right-content .right-content-body #floor_' + header_info.floor[i + 1]).offset().top > 206) {$('.form-content .buildings-room-info .left-nav #floor_' + header_info.floor[i]).addClass('selected').siblings().removeClass('selected');break;}}})