Плавная прокрутка к определенному разделу при нажатии

#javascript #html #jquery #css #smooth-scrolling

#javascript #HTML #jquery #css #плавная прокрутка

Вопрос:

Я относительно новичок в программировании, и поэтому может быть что-то супер очевидное, чего мне не хватает… но я пытаюсь создать кнопку для прокрутки до указанного раздела на моей веб-странице. Я использовал почти идентичный код на предыдущей веб-странице, и он работал прекрасно, но по какой-то причине я борюсь с этим, и он просто не хочет работать, что бы я ни делал!

Вот упрощенная версия того, что у меня есть:

 $(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>

Любая помощь вообще действительно ценится!

1. $('html. body') в качестве разделителя должна использоваться запятая вместо точки. В коллекции щелкните обработчик событий.

2. Спасибо! Я изменил это, но, похоже, он все еще не работает?

Ответ №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. привет, большое вам спасибо. Я все еще в замешательстве, потому что, когда я запускаю это по ссылке, которую вы опубликовали, или в codepen, это работает. Однако, когда я копирую и вставляю точный код в код, над которым я работаю, он не работает. Есть какие-либо предложения, объясняющие, почему это происходит ?!

2. используете ли вы больше библиотек в своем коде? я предполагаю, что один из них блокирует ваши клики. вы знаете, как использовать точки останова?

3. Привет, я не думаю, что я использую какие-либо другие библиотеки. Вы имеете в виду точки останова, как в точках останова пикселей ширины экрана? Я собирался написать какой-нибудь jquery для адаптивного макета страницы, но я еще не