如何阻止锚点标签导致页面向下跳转及URL变更

要解决点击滑块导航时URL变化和页面滚动的问题，只需用JavaScript阻止原生锚点的默认行为，手动实现滑块滚动即可，具体步骤如下：

1. 修改HTML导航链接 #

把原来的href="#slide-*"替换成自定义属性（比如data-target），避免触发原生锚点行为：

<div class="slider-nav">
    <a data-target="#slide-1"></a>
    <a data-target="#slide-2"></a>
    <a data-target="#slide-3"></a>
    <a data-target="#slide-4"></a>
    <a data-target="#slide-5"></a>
</div>

2. 添加JavaScript控制逻辑 #

在页面中加入这段JS代码，监听导航点击事件，手动控制滑块滚动：

// 获取滑块容器和所有导航按钮
const slider = document.querySelector('.slider');
const navButtons = document.querySelectorAll('.slider-nav a');

navButtons.forEach((button, index) => {
    button.addEventListener('click', (e) => {
        // 阻止原生锚点的默认行为（修改URL+页面滚动）
        e.preventDefault();
        
        // 计算目标位置：每个slide宽度等于滑块容器的宽度，索引乘以宽度就是横向滚动距离
        const slideWidth = slider.clientWidth;
        slider.scrollTo({
            left: slideWidth * index,
            behavior: 'smooth' // 保持平滑滚动效果，和CSS里的scroll-behavior对应
        });

        // 给当前激活的导航按钮添加高亮样式
        navButtons.forEach(btn => btn.style.opacity = '0.75');
        button.style.opacity = '1';
    });
});

3. 可选：优化导航高亮的CSS（更规范写法） #

如果希望高亮样式更易维护，可以在CSS里新增一个.active类，代替直接修改元素style：

.slider-nav a.active {
    opacity: 1;
}

然后把JS里的样式修改部分替换为：

navButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');

原理说明 #

原来的href="#slide-id"会触发浏览器原生锚点行为：修改URL哈希值，同时自动滚动到对应ID的元素位置。通过e.preventDefault()阻止该默认行为后，用scrollTo()手动控制滑块的横向滚动，既保留了平滑切换的效果，又不会修改URL或让页面整体滚动。

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