点击Carousel箭头按钮页面跳转问题求助

问题背景 #

找到一个纯CSS实现的轮播组件，效果符合需求，但点击箭头按钮时页面会强制跳转到某个位置（打开开发者工具时无此问题）。尝试调整.carousel的padding-top、.carousel__viewport的定位属性及箭头按钮的位置属性均未解决。

原因分析 #

问题源于锚点链接的默认行为：箭头按钮的href指向轮播slide的id，浏览器会自动滚动页面到对应slide元素的位置。由于slide元素位于绝对定位的viewport容器内，导致页面整体发生跳转。开发者工具打开时，窗口布局变化干扰了浏览器的滚动锚定行为，因此问题不显现。

解决方案 #

将锚点目标从slide元素转移到内部的.carousel__snapper元素，确保轮播的滚动快照逻辑正常工作：

1. 修改HTML结构 #

把每个slide的id属性移到对应的.carousel__snapper上：

<section class="carousel" aria-label="Gallery">
  <ol class="carousel__viewport">
    <li tabindex="0" class="carousel__slide">
      <div id="carousel__slide1" class="carousel__snapper">
        <a href="#carousel__slide4" class="carousel__prev">Go to last slide</a>
        <a href="#carousel__slide2" class="carousel__next">Go to next slide</a>
      </div>
    </li>
    <li tabindex="0" class="carousel__slide">
      <div id="carousel__slide2" class="carousel__snapper"></div>
      <a href="#carousel__slide1" class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide3" class="carousel__next">Go to next slide</a>
    </li>
    <li tabindex="0" class="carousel__slide">
      <div id="carousel__slide3" class="carousel__snapper"></div>
      <a href="#carousel__slide2" class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide4" class="carousel__next">Go to next slide</a>
    </li>
    <li tabindex="0" class="carousel__slide">
      <div id="carousel__slide4" class="carousel__snapper"></div>
      <a href="#carousel__slide3" class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide1" class="carousel__next">Go to first slide</a>
    </li>
  </ol>
  <aside class="carousel__navigation">
    <ol class="carousel__navigation-list">
      <li class="carousel__navigation-item">
        <a href="#carousel__slide1" class="carousel__navigation-button">Go to slide 1</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide2" class="carousel__navigation-button">Go to slide 2</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide3" class="carousel__navigation-button">Go to slide 3</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide4" class="carousel__navigation-button">Go to slide 4</a>
      </li>
    </ol>
  </aside>
</section>

2. 可选CSS优化 #

为避免不必要的焦点行为，给.carousel__snapper添加tabindex="-1"：

.carousel__snapper {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  tabindex: -1;
}

效果说明 #

修改后，锚点链接指向.carousel__snapper元素——该元素是轮播内部的滚动快照锚点，浏览器会将滚动行为限制在.carousel__viewport容器内，不会触发页面整体跳转，彻底解决问题。

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