Igor Houwat Igor Houwat - 2 months ago 47
jQuery Question

Material design lite smooth scroll

I am trying to implement a smooth scroll with material design lite. I found this thread which was similar in that it suggested to include 'mdl-layout__content' instead of 'html, body', but it didn't help with the problem.
Material Design Lite and jQuery, smooth scroll not working

Here is the link to my code: http://codepen.io/houwat/pen/wzaBza?editors=1010

Here is the code I am trying. When I replace 'mdl-layout__content' with 'html, body', it then gets to the right area, but skips. It does work fine in smaller windows and from the nav drawer.

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


Another option I had was this. Works like a charm without Material Design Lite, but it doesn't work at all with it:

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

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


It seems the problem is happening here. The opener and mdl-layout__header--scroll are making the animation buggy. I'd still like to keep the opener class, which will contain the background image...

<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
 $('mdl-layout__content').animate({

The . before is important. It means that mdl-layout__content is a class. Change that to

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