JavaScript单页落地页导航点击滚动到对应区块问题求助

问题排查及修复方案 #

你代码里存在4个核心问题，修复后即可实现功能：

• 生成导航链接的HTML拼接语法错误，data-id属性缺少左引号，导致属性值读取异常
• 未显式调用createNavigation()函数，导航菜单不会正常生成
• 用到的isInViewport判断函数未定义，会触发控制台报错阻塞后续代码运行
• 未处理DOM加载时序问题，如果JS代码放在页面头部，会出现无法获取DOM元素的问题

1. 修复后的导航生成代码

/* 声明文档片段和区块集合变量 */
const container = document.createDocumentFragment();
const menuList = document.getElementsByTagName('section');

/* 生成导航链接的函数 */
function navigationLink(id, name) {
    // 修复data-id的引号拼接错误，添加href防止默认跳转
    const navLink = `<a class="menu__link" data-id="${id}" href="javascript:void(0)">${name}</a>`;
    return navLink;
}

/* 生成导航列表的函数 */
function createNavigation() {
    for (let i = 0; i < menuList.length; i++) {
        const newMenuListItem = document.createElement('li');
        const menuListName = menuList[i].getAttribute('data-nav')
        const menuListID = menuList[i].getAttribute('id')
        newMenuListItem.innerHTML = navigationLink(menuListID, menuListName)
        container.appendChild(newMenuListItem);
    }
    const navBarMenu = document.getElementById('navbar__list')
    navBarMenu.appendChild(container);
}

// 补全视口判断函数，可根据需求调整判断阈值
function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top <= 100 &&
        rect.bottom >= 100
    );
}

// 滚动时给可见区块添加激活类
function setActiveClass() {
    for (let i = 0; i < menuList.length; i++) {
        if (isInViewport(menuList[i])) {
            menuList[i].classList.add("your-active-class");
        } else {
            menuList[i].classList.remove("your-active-class");
        }
    }
}

2. 修复后的滚动交互代码

function scrollToElement(event) {
    event.preventDefault();
    if (event.target.nodeName === 'A') {
        const menuListID = event.target.getAttribute('data-id');
        const targetSection = document.getElementById(menuListID);
        targetSection.scrollIntoView({ behavior: "smooth", block: "start" });
    }
}
document.addEventListener('scroll', function () {
    setActiveClass();
});

// 所有DOM操作放在DOM加载完成的回调中，避免获取元素失败
document.addEventListener('DOMContentLoaded', function() {
    // 主动调用导航生成函数
    createNavigation();
    const navBarMenu = document.getElementById('navbar__list')
    navBarMenu.addEventListener('click', function (event) {
        scrollToElement(event)
    })
})

注意事项

• 确保你的每个section区块都设置了正确的id属性和data-nav属性
• 确保页面中的导航ul元素id为navbar__list

内容的提问来源于stack exchange，提问作者Jonas Achouri Sihlén