Материал Дизайн Lite и JQuery, плавная прокрутка не работает

Question

Я не могу использовать.animate метод jQuery с Google Design Material Lite(MDL). Я использовал MDL для создания панели навигации, но плавная прокрутка не работала.

Простой код JQuery это:

$(function(){
            $('a.smooth').click(function(){
                console.log("SMOOTH BEGIN");
                var speed = 1000;
                var href= $(this).attr("href");
                var target = $(href == "#" || href == "" ? 'html' : href);
                var position = target.offset().top;
                $("html, body").animate({scrollTop:position}, speed, "swing");
                console.log("SMOOTH END");
            });
        });

И простой HTML-код это:

<!-- Navigation (this is included header) -->
<nav class="mdl-navigation">
    <a class="mdl-navigation__link" href="">Home</a>
    <a class="mdl-navigation__link smooth" href="#product">Product</a>
</nav>

<!--Main contents -->
<main class="mdl-layout__content">
    <div id="product"><!—-Contents-—></div>
</main>

Этот код показывал мне журнал "Плавное начало" и "Плавное завершение". Однако эта ссылка работает как обычная ссылка, а не как гладкая. Как я могу заставить jQuery работать с MDL? Возможно, возникают конфликты, но консоль ничего не показывает.

Answer 1

Причина, по которой вы ничего не видите, заключается в том, что вы прокручиваете узел тела. MDL обрабатывает переполнение в mdl-layout__content, это элемент, на который вы должны прокрутить.

Так что это -

$("html, body").animate({scrollTop:position}, speed, "swing");

Теперь становится

$(".mdl-layout__content").animate({scrollTop:position}, speed, "swing");

Вот пример codepen - http://codepen.io/mdlhut/pen/BNeoVa

Answer 2

Мицухико Шимомура помог мне в другом вопросе переполнения стека. Вместо var position = target.offset().top; я использовал var position = target.get( 0 ).offsetTop - 130; если бы не свиток пошел бы наверх и скинул позицию, это не выглядело хорошо. Я должен был добавить - 130 к .offsetTop потому что гладкая прокрутка проходила мимо моих целевых идентификаторов в HTML. Спасибо вам за помощь! Смотрите мое приложение, где я использовал эту функцию плавной прокрутки.

И не забудьте добавить класс сглаживания для якорей в HTML, как это

<a class="smooth" href="#scrollToId">Target</a> 
<div id="scrollToId">Target</div>

$(function(){
  $('a.smooth').click(function(){
    console.log("SMOOTH BEGIN");
    var speed = 1000;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.get( 0 ).offsetTop - 130;
    $(".mdl-layout__content").animate({scrollTop:position}, speed, "swing");
    console.log("SMOOTH END");
  });
});