Question

我对编码还比较陌生，因此可能缺少一些明显的东西……但是我试图创建一个按钮来滚动到网页上的指定部分。我在上一个网页上使用了几乎相同的代码，并且效果很好，但是由于某种原因，我在此页面上苦苦挣扎，无论我做什么，它都不想工作！

这是我所拥有的简化版本：

$(document).ready(function() {

  $(".js--scroll-to-collection").click(function() {
    $('html, body').animate({
      scrollTop: $(".js--section-collection").offset().top
    }, 1000);
  });

  $('.js--scroll-to-start').click(function() {
    $('html, body').animate({
      scrollTop: $('.js--section-features').offset().top
    }, 1000);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div>
    <a class="btn js--scroll-to-collection" href="#">Shop</a>
    <a class="btn js--scroll-to-start" href="#">Shop</a>
  </div>
</section>

<section class="section-features js--section-features">
  <div class="row">
    <h2>These are the features</h2>
    <p>
      This paragraph describes the features of the products on thi webpage.
    </p>
  </div>
</section>


<section class="section-collection js--section-collection">
  <div>
    <h2>Meet the Collection</h2>
    <p>This section describes the different collections in the product range.</p>
  </div>
</section>

真的很感谢任何帮助！

Answer 1

您只需要填写多个部分即可。这是您的代码示例。

https://jsfiddle.net/y3dvtpf2/

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {

        $(".js--scroll-to-collection").click(function () {
            $('html, body').animate({
                scrollTop: $(".js--section-collection").offset().top
            }, 1000);
        });

        $('.js--scroll-to-start').click(function () {
            $('html, body').animate({
                scrollTop: $('.js--section-features').offset().top
            }, 1000);
        });

    });
</script>
<section>
    <div>
        <a class="btn js--scroll-to-collection" href="#">Shop</a>
        <a class="btn js--scroll-to-start" href="#">Shop</a>
    </div>
</section>

<section class="section-features js--section-features">
    <div class="row">
        <h2>These are the features</h2>
        <p>
            This paragraph describes thedddd
            <br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            features of the products on thi webpage.
        </p>
    </div>
</section>


<section class="section-collection js--section-collection">
    <div>
        <h2>Meet the Collection</h2>
        <p>This section describes the different
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br>

            collections in the product range.</p>
    </div>
</section>

</html>

单击时平滑滚动到特定部分

1 个答案: