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
3 answers
solution1
0 2016-10-12 22:12:07
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.
solution2
0 2016-11-05 18:43:18
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});
solution3
0 2017-09-15 15:47:19
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");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.