Javascript 材质设计Lite和jQuery，平滑滚动不工作

我无法用谷歌的Material Design Lite（MDL）使用jQuery的.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");
            });
        });

<!-- 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>

简单的html代码如下：

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

<!-- 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？可能发生了一些冲突，但console没有显示任何内容。

您没有看到任何内容发生的原因是您正在body节点上滚动。MDL处理MDL-layout\u内容中的溢出，这是您应该滚动的元素

那么这个-

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

现在变成-

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

下面是一个代码笔示例-

---

岛村光彦在另一个堆栈溢出问题上帮助了我。而不是

var position=target.offset（）.top我使用了
var position=target.get（0）.offsetTop-130
如果没有，滚动条会转到顶部并偏离该位置，看起来不太好。我不得不将
-130
添加到
.offsetTop
中，因为平滑的滚动要经过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");
  });
});


目标
$（函数（）{
$（'a.smooth'）。单击（函数（）{
控制台日志（“顺利开始”）；
无功转速=1000；
var href=$（this.attr（“href”）；
var target=$（href==“#”| | href==”？“html”：href）；
var position=target.get（0）.offsetTop-130；
$（“.mdl-layout_ucontent”）.animate（{scrollTop:position}，speed，“swing”）；
控制台日志（“平滑端”）；
});
});
其他使用滚动标题的人的注意事项，
$（'.mdl-layout\uu content'）
变为
$（'.mdl-layout'）