Material Design Lite和jQuery，平滑滚动无法正常工作

Question

我无法使用Google的Material Design Lite（MDL）使用.animate方法。 我使用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>

这段代码向我展示了日志，“SMOOTH BEGIN”和“SMOOTH END”。 但是，该链接作为普通链接，不像平滑。 如何让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

Mitsuhiko Shimomura帮助我解决了一个不同的堆栈溢出问题。 而不是var position = target.offset().top; 我用var position = target.get( 0 ).offsetTop - 130; 如果不是滚动将顶部并甩掉位置，它看起来不太好。 我不得不在.offsetTop添加- 130 ，因为平滑滚动在html中超过了我的目标id。 感谢您的帮助！ 查看我使用此smoothscroll功能的应用程序 。

并记得像这样在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");
  });
});