求助：用JavaScript将ID为work1acc的div关联到锚点#work1失败

有一个ID为work1acc的<div>元素，需要实现点击该元素跳转到页面内锚点#work1。尝试了一段JavaScript代码但无法生效，代码如下：

document.getElementById('work1acc').addEventListener('click', function() {
    location.href = '#work1';`
});

1. 修复原代码的语法错误 #

原代码中location.href = '#work1';末尾多了一个多余的反引号（`），这会导致JavaScript语法错误，浏览器无法执行这段代码。修正后的代码如下：

document.getElementById('work1acc').addEventListener('click', function() {
    location.href = '#work1';
});

2. 更可靠的锚点跳转方法 #

如果修正语法后仍然无法跳转，可能是浏览器滚动行为被拦截或锚点元素定位异常，可使用Element.scrollIntoView()方法，它能直接定位目标元素，兼容性更好且行为更可控：

document.getElementById('work1acc').addEventListener('click', function() {
    const targetElement = document.getElementById('work1');
    if (targetElement) {
        // 平滑滚动到目标元素，设置behavior为'auto'可关闭平滑效果
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
});

3. 额外优化建议 #

• 确保脚本在DOM加载完成后执行，避免因元素未加载导致获取失败，可将代码包裹在DOMContentLoaded事件监听中：

document.addEventListener('DOMContentLoaded', function() {
    const trigger = document.getElementById('work1acc');
    const target = document.getElementById('work1');
    if (trigger && target) {
        trigger.addEventListener('click', function() {
            target.scrollIntoView({ behavior: 'smooth' });
        });
    }
});

• 给work1acc添加CSS样式，提示用户该元素可点击：

#work1acc {
    cursor: pointer;
}

内容的提问来源于stack exchange，提问作者Arad Ahmadpour