如何取消HTML滑块导航按钮的滚动跳转或调整滚动目标？

问题核心 #

点击.slider__navlink时，浏览器会默认根据href的锚点值滚动到对应slide元素，我们需要修改这个行为，同时保留滑块切换的原有功能。

方案1：完全取消自动滚动，仅切换滑块 #

通过阻止a标签的默认锚点跳转行为，同时保留滑块切换逻辑：

// 获取所有导航按钮
const navLinks = document.querySelectorAll('.slider__navlink');

navLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止浏览器默认的锚点滚动行为
    e.preventDefault();
    
    // 获取目标slide的ID（去掉href中的#符号）
    const targetSlideId = this.getAttribute('href').slice(1);
    const targetSlide = document.getElementById(targetSlideId);
    
    // 隐藏所有slide，显示目标slide（请根据你原有滑块的逻辑调整，比如用类名控制显隐）
    document.querySelectorAll('.slide').forEach(slide => {
      slide.classList.remove('active');
    });
    targetSlide.classList.add('active');
    
    // 更新导航按钮的激活状态
    navLinks.forEach(item => item.classList.remove('active'));
    this.classList.add('active');
  });
});

提示：如果你的滑块有现成的切换函数（比如插件自带的方法），直接在e.preventDefault()后调用该函数即可，无需自行编写显隐逻辑。

方案2：改为滚动到上方标题区域，同时切换滑块 #

如果希望点击后滚动到顶部的#competences标题，再切换滑块：

const navLinks = document.querySelectorAll('.slider__navlink');
const targetTitle = document.getElementById('competences');

navLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    
    // 平滑滚动到标题区域（behavior: 'smooth'为可选参数，去掉则为瞬间跳转）
    targetTitle.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
    
    // 执行滑块切换逻辑（与方案1一致）
    const targetSlideId = this.getAttribute('href').slice(1);
    const targetSlide = document.getElementById(targetSlideId);
    
    document.querySelectorAll('.slide').forEach(slide => {
      slide.classList.remove('active');
    });
    targetSlide.classList.add('active');
    
    navLinks.forEach(item => item.classList.remove('active'));
    this.classList.add('active');
  });
});

方案3：修改HTML实现（无需额外阻止默认行为） #

直接修改a标签的href为标题锚点，用data-*属性存储目标slide的ID，这样浏览器会默认滚动到标题，同时通过JS切换滑块：

修改后的HTML：

<div class="slider__nav">
  <a class="slider__navlink" href="#competences" data-slide="slides__1"></a>
  <a class="slider__navlink" href="#competences" data-slide="slides__2"></a>
  <a class="slider__navlink" href="#competences" data-slide="slides__3"></a>
</div>

配套JS：

const navLinks = document.querySelectorAll('.slider__navlink');

navLinks.forEach(link => {
  link.addEventListener('click', function() {
    const targetSlideId = this.dataset.slide;
    const targetSlide = document.getElementById(targetSlideId);
    
    // 切换slide的显示状态
    document.querySelectorAll('.slide').forEach(slide => {
      slide.classList.remove('active');
    });
    targetSlide.classList.add('active');
    
    // 更新导航按钮的激活状态
    navLinks.forEach(item => item.classList.remove('active'));
    this.classList.add('active');
  });
});

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