js 锚点

// 示例代码：使用 JavaScript 创建和操作锚点

// HTML 结构
/*
<a href="#section1" id="anchorLink">跳转到 section1</a>
<div id="section1" style="margin-top: 1000px;">
    这是 section1 的内容
</div>
*/

// JavaScript 代码
document.addEventListener('DOMContentLoaded', function() {
    // 获取锚点链接
    var anchorLink = document.getElementById('anchorLink');

    // 添加点击事件监听器
    anchorLink.addEventListener('click', function(event) {
        event.preventDefault(); // 阻止默认行为

        // 获取目标元素
        var targetSection = document.getElementById('section1');

        // 滚动到目标元素的位置
        if (targetSection) {
            targetSection.scrollIntoView({ behavior: 'smooth' });
        }
    });
});

解释说明：

1. HTML 结构：我们有一个锚点链接 <a> 和一个目标区域 <div>。点击链接时，页面会滚动到目标区域。
2. JavaScript 代码：
   • 使用 document.addEventListener 确保 DOM 完全加载后再执行脚本。
   • 获取锚点链接元素并为其添加点击事件监听器。
   • 在点击事件中，阻止默认行为（即直接跳转），然后通过 scrollIntoView 方法平滑滚动到目标元素。

这样可以实现平滑的锚点跳转效果，提升用户体验。