Igor Houwat Igor Houwat - 1 year ago 257
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.

$("a").on('click', function(event) {
if (this.hash !== "") {
var hash = this.hash;
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:

var the_id = $(this).attr("href");

$('html, body').animate({
}, 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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download