Material Design Lite 和 jQuery，平滑滚动不起作用

Question

我无法将 jQuery 的 .animate 方法与 Google 的 Material Design 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>

这段代码向我展示了日志，"SMOOTH BEGIN" 和 "SMOOTH END"。但是，link 与普通 link 一样工作，而不是平滑。如何让 jQuery 使用 MDL？也许发生了一些冲突，但控制台没有显示任何内容。

Answer 1

您没有看到任何事情发生的原因是您在 body 节点上滚动。 MDL 处理 mdl-layout__content 中的溢出，这是您应该滚动的元素。

所以这个 -

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

现在变成-

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

这是一个代码笔示例 - http://codepen.io/mdlhut/pen/BNeoVa

Answer 2

Mitsuhiko Shimomura 帮助我解决了另一个堆栈溢出问题。我使用 var position = target.get( 0 ).offsetTop - 130; 而不是 var position = target.offset().top; ，否则滚动会转到顶部并离开位置，看起来不太好。我必须将 - 130 添加到 .offsetTop，因为平滑滚动会超过我在 html 中的目标 ID。感谢您的帮助！请参阅我的 app 我在其中使用了此平滑滚动功能。

并记得在 html 中像这样向锚点添加平滑 class

<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");
  });
});

Material Design Lite 和 jQuery，平滑滚动不起作用

Material Design Lite and jQuery, smooth scroll not working

html

javascript

jquery

conflicting-libraries

material-design-lite