大家好，我正在尝试使用 google mdl 制作一个网站模板，但问题是单击菜单链接时将页面滚动到相应部分的代码不起作用。
请参阅代码以获取帮助:
// 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>
所以，如果您知道解决此问题的方法，请告诉我。
任何可以与 mdl 配合使用的插件也可以为我完成这项工作。
提前致谢
最佳答案
如果它没有在 google mdl 上滚动，则可能是您没有在 html 或 body 上滚动。查看这篇文章了解更多详细信息:Material Design Lite and jQuery, smooth scroll not working
所以这段代码:
$('body, html').animate({scrollTop: pos});
应该是这样的:
$('mdl-layout').animate({scrollTop: pos});
我知道这是一个迟到的帖子，但无论如何。
关于javascript - jquery animate.scrollTop() 在 mdl 链接中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37069166/