阻止锚点链接触发主页面滚动：局部滚动控制技术

<div class="container">
    <div class="left-container">
        <!-- 多个卡片，每个卡片有一个唯一的ID -->
        <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="j"><h1>J</h1><p>...</p></div>
    </div>
    <div class="right-container">
        <!-- 多个锚点链接，指向左侧容器中的卡片ID -->
        <div class="click"><a href="#j">CLIC J</a></div>
        <div class="click"><a href="#i">CLIC I</a></div>
        <!-- ... 更多链接 ... -->
        <div class="click"><a href="#a">CLIC A</a></div>
    </div>
</div>
<!-- 页面其他内容，用于展示主页面滚动条 -->
<div class="text-container">
    <p>Lorem ipsum dolor sit amet...</p>
    <!-- ... 大量文本内容以确保主页面可滚动 ... -->
</div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

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

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

.left-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0px;
    width: 35%;
    height: 60vh; /* 固定高度 */
    overflow-x: hidden;
    overflow-y: scroll; /* 允许垂直滚动 */
}

.right-container{
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    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;
    /* 确保此容器有足够内容以生成主页面滚动条 */
}

const links = document.querySelectorAll('.click a'); // 选取所有在.click类中的锚点链接
const scrollWrapper = document.querySelector('.left-container'); // 选取需要滚动的容器

links.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止锚点链接的默认跳转行为

    // 获取锚点链接的href属性值，即目标元素的ID（例如 "#j"）
    const targetId = link.getAttribute('href'); 
    // 根据ID选取目标元素（例如 id="j" 的卡片）
    const el = document.querySelector(targetId);

    if (el && scrollWrapper) {
      // 使用scrollWrapper的scrollTo方法进行局部滚动
      scrollWrapper.scrollTo({
        top: el.offsetTop, // 滚动到目标元素相对于其最近定位父元素（即scrollWrapper）顶部的距离
        behavior: 'smooth' // 实现平滑滚动效果
      });
    }
  });
});