如何使用jQuery在HTML可滚动div中定位到指定元素？

没问题，我来帮你实现点击链接后让目标元素滚动到Div顶部并高亮的需求！结合你的代码，我会给出完整的解决方案，分步骤说明：

核心思路 #

1. 阻止链接默认的跳转行为（避免页面跳到顶部）
2. 点击时定位到当前点击的链接元素
3. 让滚动Div自动滚动到该元素的顶部位置
4. 给当前元素添加高亮样式，同时移除其他元素的高亮状态

完整代码实现 #

HTML（给滚动Div添加ID方便操作） #

<div id="scrollableDiv" class="col-md-3" style="height: 500px; overflow: scroll;">
  <ul class="nav flex-column nav-pills arealinks" style="">
    <li class="nav-item"><a class="nav-link lahore" href="#">Lahore</a></li>
    <li class="nav-item"><a class="nav-link faisalabad" href="#">Faisalabad</a></li>
    <li class="nav-item"><a class="nav-link multan" href="#">Multan</a></li>
    <li class="nav-item"><a class="nav-link bahawalpur" href="#">Bahawalpur</a></li>
    <li class="nav-item"><a class="nav-link wazirabad" href="#">Wazirabad</a></li>
    <li class="nav-item"><a class="nav-link sargodha" href="#">Sargodha</a></li>
    <li class="nav-item"><a class="nav-link sialkot" href="#">Sialkot</a></li>
    <li class="nav-item"><a class="nav-link karachi" href="#">Karachi</a></li>
    <li class="nav-item"><a class="nav-link hyderabad" href="#">Hyderabad</a></li>
    <li class="nav-item"><a class="nav-link mirpur_khas" href="#">Mirpur Khas</a></li>
    <li class="nav-item"><a class="nav-link quetta" href="#">Quetta</a></li>
    <li class="nav-item"><a class="nav-link peshawar" href="#">Peshawar</a></li>
    <li class="nav-item"><a class="nav-link kohat" href="#">Kohat</a></li>
    <li class="nav-item"><a class="nav-link d_i_khan" href="#">D I Khan</a></li>
  </ul>
</div>

CSS（添加高亮样式） #

.nav-link.highlighted {
  background-color: #ffeb3b; /* 黄色高亮，你可以换成自己喜欢的颜色 */
  font-weight: bold;
}

JavaScript（实现点击滚动和高亮逻辑） #

// 获取所有导航链接和滚动容器
const scrollableDiv = document.getElementById('scrollableDiv');
const navLinks = document.querySelectorAll('.nav-link');

// 给每个链接绑定点击事件
navLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 1. 阻止默认跳转行为
    e.preventDefault();
    
    // 2. 移除所有链接的高亮样式
    navLinks.forEach(item => item.classList.remove('highlighted'));
    
    // 3. 给当前点击的链接添加高亮
    this.classList.add('highlighted');
    
    // 4. 让滚动容器滚动到当前元素的顶部位置
    // 使用scrollIntoView实现平滑滚动并对齐顶部
    this.scrollIntoView({
      behavior: 'smooth', // 平滑滚动，可选值：'auto'（瞬间）或 'smooth'
      block: 'start'      // 元素顶部对齐容器顶部
    });
    
    // 如果你不想用smooth滚动，也可以用scrollTop手动计算：
    // scrollableDiv.scrollTop = this.offsetTop - scrollableDiv.offsetTop;
  });
});

代码说明 #

• scrollIntoView：这是浏览器原生API，非常方便实现元素滚动到视图内，block: 'start'确保元素顶部对齐容器顶部，behavior: 'smooth'提供平滑滚动效果（如果不需要可以改成'auto'）。
• 高亮逻辑：点击时先移除所有链接的highlighted类，再给当前链接添加，保证只有一个高亮元素。
• 阻止默认行为：用e.preventDefault()避免点击#导致页面跳到顶部的问题。

你可以直接把这段代码加到你的项目里，测试一下点击每个链接，就能看到对应的元素自动滚动到Div顶部并高亮啦！

内容的提问来源于stack exchange，提问作者Muhammad Afaq Riaz