Bootstrap Carousel Prev/Next按钮问题：点击切换时页面下移

问题根源 #

你的轮播切换按钮使用了<a>标签，其中href="#testimonial-carousel"会触发浏览器的锚点跳转行为，导致页面自动滚动到ID为testimonial-carousel的元素位置，这就是点击按钮时页面轻微向下滚动的原因。

解决方案 #

下面提供几种简单有效的修复方式，任选其一即可：

方式1：直接阻止默认跳转行为 #

在按钮的<a>标签中添加onclick="event.preventDefault();"，既保留轮播切换功能，又能阻止锚点跳转：

<div id="testimonial-carousel" class="carousel slide" data-ride="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
      <img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
      <em>Pebbles, New York</em>
    </div>
    <div class="carousel-item">
      <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of
        their life. I think.</h2>
      <img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
      <em>Beverly, Illinois</em>
    </div>
  </div>
  <a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev" onclick="event.preventDefault();">
    <span class="carousel-control-prev-icon"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next" onclick="event.preventDefault();">
    <span class="carousel-control-next-icon"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

方式2：修改href为无效跳转值 #

把href="#testimonial-carousel"替换为href="javascript:void(0);"，同样能阻止锚点跳转：

<a class="carousel-control-prev" href="javascript:void(0);" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="javascript:void(0);" role="button" data-slide="next">
  <span class="carousel-control-next-icon"></span>
  <span class="sr-only">Next</span>
</a>

方式3：JavaScript批量绑定事件（适合多轮播场景） #

如果页面存在多个轮播组件，用JS统一处理更高效：

document.querySelectorAll('.carousel-control-prev, .carousel-control-next').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    const carousel = new bootstrap.Carousel(this.closest('.carousel'));
    this.classList.contains('carousel-control-prev') ? carousel.prev() : carousel.next();
  });
});

修改完成后，点击Prev/Next按钮就能正常手动切换轮播内容，页面不会再出现不必要的滚动。

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