Material design lite 平滑滚动

Question

我正在尝试使用 material design lite 实现平滑滚动。我发现这个线程的相似之处在于它建议包含 'mdl-layout__content' 而不是 'html, body'，但它对解决问题没有帮助。

这是我的代码 link：http://codepen.io/houwat/pen/wzaBza?editors=1010

这是我正在尝试的代码。当我用 'html, body' 替换 'mdl-layout__content' 时，它会到达正确的区域，但会跳过。它在较小的 windows 和导航抽屉中工作正常。

$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('mdl-layout__content').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    } 
  });
});

我的另一个选择是这个。在没有 Material Design Lite 的情况下工作起来就像一个魅力，但它根本不起作用：

   $('a[href^="#"]').click(function(){
    var the_id = $(this).attr("href");

    $('html, body').animate({
        scrollTop:$(the_id).offset().top
    }, 1500, "swing");
    return false;
});

看来问题出在这里。开场白和 mdl-layout__header--scroll 使动画出现错误。我仍然想保留开场白 class，其中将包含背景图片...

  <div class="mdl-layout mdl-js-layout mdl-layout--no-desktop-drawer-button">

<header class="opener mdl-layout__header mdl-layout__header--scroll mdl-layout__header--transparent">

Answer 1

 $('mdl-layout__content').animate({

前面的.重要。这意味着 mdl-layout__content 是一个 class。将其更改为

$('.mdl-layout__content').animate({

Answer 2

我想通了。 mdl-layout__header--scroll 在某种程度上与 jQuery 是对立的。我仍然没有解决那个问题，但我至少已经确定了问题所在。

Material design lite 平滑滚动

Material design lite smooth scroll

jquery

material-design

material-design-lite