0
私が設計している個人用ウェブサイトに問題があります。私は、リスト項目を一度押すと、希望の位置にスクロールできるようにしたいと思います。以前はこれを使用していましたが、JSまたはこれを使用する方が良いかどうかは不明でした。私はJavaScriptには不慣れですが、アンカーがJSスクロールメソッドを呼び出す方法を理解できませんでした。これは私がこれまで持っているものです。ボタンなしのJavascriptスクロールで問題が発生する
<!doctype HTML>
<html>
<head>
<title>Jackson Singleton</title>
<link rel="stylesheet" type="text/css" href="CSS/stylesheet.css">
<div id="heading">
<h1><a href="index.html">jackson<span id ="lastName">singleton</span></a></h1>
</div>
<div class="navBar">
<ul id="navList">
<li id="home">home</li>
<li id="port"><a href>portfolio</a></li>
<li id="inqr"><a href>inquiries</a></li>
</ul>
</div>
</div>
</head>
<br />
<body>
<script src="JavaScript/script.js"></script>
<div class="bodyPanel" id="portBody">
<h1 id="portHeading">portfolio</h1>
</div>
<div class="bodyPanel" id="inqrBody">
</div>
</body>
</html>
そして、JS：
var portLink = document.getElementById('port');
portLink.onclick=function(){
document.getElementById('portHeading').scrollIntoView();
}
助けてください！
あなたは、これがスムーズなスクロールアニメーションにしたい場合は、jQueryのための[アニメーション]（http://api.jquery.com/animate/）機能を調べます。さもなければ、あなたはJavaScriptを必要としません。リンクのhref属性を 'Scroll to My Element'のようなジャンプ先の要素のidと等しく設定するだけです。滑らかなスクロールを純粋なJavaScriptでアニメーション化する方法がありますが、あなたが「ばかげた未熟な」方法を見ていると、jQueryソリューションを使うのが最も簡単だと思います。 –
このリンクはすべて必要ですが、Jqueryが最善の選択で、href属性のアンカータグの値も指定する必要があります。 https://css-tricks.com/snippets/jquery/smooth-scrolling/ – theblindprophet