JavaScript实现局部滚动：阻止锚点链接影响主页面滚动

<div class="container">
    <div class="left-container">
        <!-- 这是一个可滚动的容器 -->
        <div class="card" id="a"><h1>A</h1><p>内容...</p></div>
        <div class="card" id="b"><h1>B</h1><p>内容...</p></div>
        <div class="card" id="c"><h1>C</h1><p>内容...</p></div>
        <!-- 更多卡片，确保内容超出 left-container 的高度以触发滚动 -->
        <div class="card" id="j"><h1>J</h1><p>内容...</p></div>
    </div>
    <div class="right-container">
        <!-- 这些是触发滚动的锚点链接 -->
        <div class="click"><a href="#j">点击 J</a></div>
        <div class="click"><a href="#i">点击 I</a></div>
        <div class="click"><a href="#a">点击 A</a></div>
    </div>
</div>
<!-- 页面底部的大量内容，用于产生主页面滚动条 -->
<div class="text-container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <!-- 更多文本 -->
</div>

body {
    font-family: 'Poppins', sans-serif;
}

.container {
    display: flex;
    width: 100%;
    box-shadow: 0px 0px 4px 0px rgba(22,22,99,0.30);
}

.left-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35%;
    height: 60vh; /* 固定高度，使其内容溢出时可滚动 */
    overflow-x: hidden;
    overflow-y: scroll; /* 关键：启用垂直滚动 */
}

.right-container {
    display: flex;
    flex-wrap: wrap;
    height: 60vh;
    width: 65%;
}

.card {
    padding: 0px 50px;
    border-radius: 20px;
    text-align: center;
    margin: 40px;
    width: 70%;
    height: 300px; /* 确保卡片足够高 */
    box-shadow: 0px 0px 4px 0px rgba(22,22,99,0.30);
}

.click {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    background-color: aliceblue;
}

.click a {
    text-align: center;
    text-decoration: none;
    width: 350px;
    height: 50px;
}

.text-container {
    padding: 5rem;
    /* 确保其内容足够长，以产生主页面的滚动条 */
}

// 1. 获取所有带有特定类名的锚点链接
const links = document.querySelectorAll('.click a');

// 2. 获取需要控制滚动的容器
const scrollWrapper = document.querySelector('.left-container');

// 3. 遍历所有链接，为每个链接添加点击事件监听器
links.forEach(link => {
  link.addEventListener('click', (e) => {
    // 阻止锚点链接的默认行为（即阻止主页面滚动）
    e.preventDefault();

    // 获取链接的 href 属性值（例如 "#j"）
    const targetId = link.getAttribute('href');

    // 根据 href 获取目标元素（例如 id 为 "j" 的卡片）
    const targetElement = document.querySelector(targetId);

    // 确保目标元素存在
    if (targetElement) {
      // 使用 scrollWrapper 的 scrollTo 方法滚动到目标元素的位置
      // targetElement.offsetTop 表示目标元素相对于其 offsetParent（在这里是 scrollWrapper）顶部的距离
      scrollWrapper.scrollTo({
        top: targetElement.offsetTop,
        behavior: 'smooth' // 实现平滑滚动效果
      });
    }
  });
});