1
こんにちは私はGoogleのmdlでウェブサイトのテンプレートを作成しようとしていますが、問題は、メニューリンクのクリックで対応するセクションにページをスクロールするためのコードはワーキング。 jquery animate.scrollTop（）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で動作するプラグインも私の仕事をすることができます。事前