Анимация при переходе в новый раздел на той же странице в js

$('#skip-intro').on("click", function() {
  var header = $('.navbar').innerHeight();
  $("html, body").animate({
    scrollTop: $('#intro').offset().top - header
  }, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#intro" id="skip-intro">Get to Know</a>
<div class="section-block" id="intro">
  ----content------
</div>

Помогите мне узнать, почему свойство анимации не работает, при переходе к следующему разделу.

Вы хотите прокрутить вниз до определенного div или раздела по событию клика в соответствии с приведенным выше кодом?

Rajender Verma 26.10.2018 08:26

В определенный раздел

Ponnaveen S 26.10.2018 08:38
2
2
114
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Оригинал здесь: Найдите здесь (но это на немецком языке)

$('a[href*="#"]').on('click',function(e) {
 e.preventDefault();
 var target = this.hash;
 var $target = $(target);
 $('html, body').stop().animate({
  'scrollTop': $target.offset().top
 }, 900, 'swing', function () {
  window.location.hash = target;
 });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#exp">Href</a>
<div style="height:1000px; background:red;"></div>
<div id="exp" style="background:green; text-align:center;">jdaslkasd</div>
Ответ принят как подходящий

Пожалуйста, используйте это так.

<header class = 'navbar'>test</header>
<a href="#intro" id="skip-intro">Get to Know</a>
<div class="section-block" id="intro" style = "margin-top: 300px;">
----content------
</div>

Сценарий

<script>
 $(document).ready(function() {
 $('#skip-intro').on("click", function(){
        var header = $('.navbar').innerHeight();
    console.log(parseInt($('#intro').offset().top) - parseInt(header))
        $("html, body").animate({ scrollTop: parseInt($('#intro').offset().top) - parseInt(header) }, 1000);
    });
  });

</script>

Обратите внимание, чтобы прокручивать анимацию до определенной позиции div, она должна находиться в этой позиции, чтобы прокрутка работала, согласно вашему html ваш блок div section уже находится наверху, поэтому он не будет анимироваться, поскольку он в настоящее время виден в этой позиции.

Даже если есть несколько кнопок с одинаковым id id = "skip-intro", это не сработает, верно?

Ponnaveen S 26.10.2018 08:36

Не используйте один и тот же id для нескольких div или элементов, так как он вообще не будет работать, он хорошо работает только с class, после использования того же класса skip-intro вы можете прокрутить его, чтобы проверить конкретное событие щелчка.

Rajender Verma 26.10.2018 08:49

Мне не нравится такой код, потому что он не объектно-ориентированный.

Patrick Schocke 26.10.2018 08:51

Итак, когда можно использовать id?

Ponnaveen S 26.10.2018 08:51

Идентификатор @PonnaveenS должен быть уникальным. Название говорит об этом. Это идентификатор. Вы не можете идентифицировать элемент, если он не уникален.

Mark Baijens 26.10.2018 08:52

@MarkBaijens верен, вы должны знать, что на самом деле указывает атрибут

Rajender Verma 26.10.2018 08:53

Другие вопросы по теме