材料設計精簡光滑滾動

我想實現與材料設計精簡的光滑滾動。我發現這個線程很相似，它建議包含'mdl-layout__content'而不是'html，body'，但它沒有幫助解決問題。 Material Design Lite and jQuery, smooth scroll not working 材料設計精簡光滑滾動

這裏是鏈接到我的代碼：http://codepen.io/houwat/pen/wzaBza?editors=1010

這裏是我想要的代碼。當我用'html，body'替換'mdl-layout__content'時，它會到達正確的區域，但是會跳過。它在小窗口和導航抽屜中工作正常。

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

我的另一個選擇是這樣的。就像沒有材料設計精簡版魅力，但它不與它在所有的工作：

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

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

看來問題發生在這裏。 opener和mdl-layout__header - scroll正在製作動畫錯誤。我還是想保持揭幕戰類，其中將包含背景圖片...

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

來源

2016-09-27 Igor Houwat