使用 jQuery 水平滚动到目标

Question

尝试通过创建一些超级简单且语义化且仅与锚链接一起使用的东西来彻底改变轮播世界。它大部分工作正常，但它会跳转到 href 而不是平滑滚动。我在这里做错了什么？

编辑：不知道如何在这里包含 jQuery，所以这里有一支笔：

https://codepen.io/tropics/pen/xxNvYzV

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js" integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function() {
  $("nav a").click(function() {
    var $carousel = $('.carousel');
    var scrollTo = $(this).attr('href');
    // change its bg
    .css('background', '#9f3')
      // retrieve its position relative to its parent
      .position().left;
    console.log(scrollTo);
    // simply update the scroll of the carousel
    // $('.carousel').scrollLeft(scrollTo); 
    // use an animation to scroll to the destination
    $carousel
      .animate({
        'scrollLeft': scrollTo
      }, 500);
  });
});
</script>

.carousel {
  width: 300px;
  height: 100px;
  overflow-x: auto;
  overflow-y: hidden;
}

.frame {
  position: relative;
  height: 100px;
  width: 770px;
}

.frame div {
  height: 90px;
  width: 60px;
  float: left;
  margin: 5px;
  background: #39f;
}

<div class="carousel">
  <div class="frame">
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
    <div id="d5"></div>
    <div id="d6"></div>
    <div id="d7"></div>
  </div>
</div>
<nav>
  <p><a href="#d1">1</a></p>
  <p><a href="#d6">6</a></p>
</nav>

Answer 1

您可以在 CSS 中添加

scroll-behavior

属性

.carousel {
  width: 300px;
  height: 100px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
}