jquery animate.scrollTop() not working in mdl links

Question

hi guys I am trying to make a website template with google mdl but the problem is that the code for scrolling the page to the corresponding section on click of a menu link is not working.

See the code for help :

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $(id).offset().top - 10;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

.Home-section {
  height:500px;
  background: deepskyblue;
  width:100%;
  }

.About-section {
  height:300px;
  background:deeppink;
  width=100%;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<head>
    
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.min.css">
  <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
    <link rel="stylesheet" href="js/lightbox2-master/src/css/lightbox.css">
    <link rel="stylesheet" href="http://anijs.github.io/lib/anicollection/anicollection.css">
    <link rel="stylesheet" href="js/animate.css">
    <link rel="stylesheet" href="main.css">
    
</head>

<body>
  <div class="mdl-layout mdl-js-layout">
<div class="mdl-layout__content">
  <a href="#home" class="mdl-navigation__link">Home</a>
  <a href="#about" class="mdl-navigation__link">About</a>
       
  <div class="Home-section" id="home"></div>
  <div class="About-section" id="about"></div>
  
  
  </div>
    </div>
</body>

So, If You know nay solution to this, Please let me know.

Any plugin that can work with mdl can also do the job for me.

Thanks in advance

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

If it's not scrolling on google mdl, it is possible that you aren't scrolling on html or body. Check this post out for more detail: Material Design Lite and jQuery, smooth scroll not working

So this piece of code:

$('body, html').animate({scrollTop: pos});

Should be something like:

$('mdl-layout').animate({scrollTop: pos});

I know it's a late post but whatever.

edited May 23 '17 at 12:01

Community

1
1

answered Oct 12 '16 at 22:12

Jeffery Tang

314
3
14

score 0 · Answer 2 · edited Nov 05 '16 at 19:11

0

I found an answer. It's not perfect, but it works.

instead of

$('body, html').animate({scrollTop: pos});

use

$(".mdl-layout__content").animate({scrollTop: pos});

edited Nov 05 '16 at 19:11

zx485

28,498
28
50
59

answered Nov 05 '16 at 18:43

Aleksandr Smyshliaev

558
2
8

score 0 · Answer 3 · edited Sep 15 '17 at 16:51

0

The reason you are not seeing anything happen is because you are scrolling on the body node. MDL handles the overflow within the mdl-layout__content, this is the element you should scroll on.

So:

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

Now becomes:

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

edited Sep 15 '17 at 16:51

Axel

3,331
11
35
58

answered Sep 15 '17 at 15:47

MT Development

1
1
6

jquery animate.scrollTop() not working in mdl links

3 Answers3