jquery animate.scrollTop（）在mdl链接中不起作用
[英]jquery animate.scrollTop() not working in mdl links
问题描述
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. 
嗨伙计们我想用谷歌mdl制作一个网站模板，但问题是，点击菜单链接滚动页面到相应部分的代码不起作用。
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. 任何可以使用mdl的插件也可以为我完成这项工作。
Thanks in advance 提前致谢
3 个解决方案
解决方案1
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 . 如果它不在google mdl上滚动，则可能是您没有在html或body上滚动。 Check this post out for more detail: Material Design Lite and jQuery, smooth scroll not working 查看这篇文章了解更多细节： Material Design Lite和jQuery，平滑滚动无效
So this piece of code: 所以这段代码：
$('body, html').animate({scrollTop: pos});
Should be something like: 应该是这样的：
$('mdl-layout').animate({scrollTop: pos}); $（'mdl-layout'）。animate（{scrollTop：pos}）;
I know it's a late post but whatever. 我知道这是一个迟到的帖子，但无论如何。
解决方案2
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});
解决方案3
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. MDL处理mdl-layout__content中的溢出，这是您应该滚动的元素。
So: 所以：
$("html, body").animate({scrollTop:position}, speed, "swing");
Now becomes: 现在变成：
$(".mdl-layout__content").stop().animate({scrollTop:position}, speed, "swing");
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.