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(`${
item}" ${
index === 0 && 'class=selected'}>${
item}F`); }); // 绑定点击事件，切换背景色 $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; } } }) 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/206969.html原文链接：https://javaforall.net
