HTML ページの別のスライドに移動するために使用したいナビゲーション div があります。animate scrollTop を使用して、さまざまなスライドの個々の ID までアニメーション化したいと考えています。私が読んだいくつかのstackoverflowの投稿とオンラインで見つけたチュートリアルに基づいて関数を書きましたが、何らかの理由で機能しません。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Home - Kevin Waldmann</title>
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"><script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
<script>
function navScroll(navId)
{
$('html, body').animate({
scrollTop: $(navId).offset().top}, 2000);
}
</script>
</head>
<body>
<div id="navbar">
<div id="navList">
<div class="navItem unselectable" onclick="navScroll('#slide1')">Home</div>
<div class="navItem unselectable" onclick="navScroll('#slide2')">Education</div>
<div class="navItem unselectable" onclick="navScroll('#slide3')">Work Experience</div>
<div class="navItem unselectable" onclick="navScroll('#slide4')">Skills</div>
<div class="navItem unselectable" onclick="navScroll('#slide5')">Links</div>
<div class="navItem unselectable" onclick="navScroll('#slide6')">Greek Life</div>
<div class="navItem unselectable" onclick="navScroll('#slide7')">Volunteering</div>
<div class="navItem unselectable" onclick="navScroll('#slide8')">Contact</div>
</div>
</div>
<div id="pageContent">
<div class="contentSpace"></div>
<div class="contentPane" id="slide1"></div>
<div class="contentSpace"></div>
<div class="contentPane" id="slide2"></div>
<div class="contentSpace"></div>
<div class="contentPane" id="slide3"></div>
<div class="contentSpace"></div>
<div class="contentPane" id="slide4"></div>
<div class="contentSpace"></div>
<div class="contentPane" id="slide5"></div>
<div class="contentSpace"></div>
<div class="contentPane" id="slide6"></div>
<div class="contentSpace"></div>
<div class="contentPane" id="slide7"></div>
<div class="contentSpace"></div>
<div class="contentPane" id="slide8"></div>
</div>
</div>
</body>
</html>
<