JavaScript Div の先頭にスクロール
-
JavaScript で
scrollIntoView()メソッドを使用して Div の先頭にスクロールする -
scrollTo()メソッドを使用して、JavaScript で Div の先頭にスクロールする
JavaScript では、Web ページの内部リンクとスクロールのために、複数の方法で従うことができます。 anchor タグの href を直接 id に設定して、そのセクションまでスクロールすることもできます。
ただし、動的ドライブの場合は、タスクを実行する JavaScript の方法に切り替えます。
次のセクションでは、scrollIntoView() および scrollTo() メソッドについて説明します。 どちらのメソッドも同様の機能を持っていますが、scrollIntoView() はパラメーターなしで機能し、scrollTo() は特定のポイントが必要になる場合があります。
例を確認してみましょう。
JavaScript で scrollIntoView() メソッドを使用して Div の先頭にスクロールする
技術的には、メソッドにはメソッドの宣言以外は何も必要ありません。 最初に最上位の div 要素のインスタンスを開始し、次に scrollIntoView() アシストを使用します。
その結果、リンクのイベントは、特にビューをその上部に移動します。 次のコード行で詳しく説明します。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#top{
height:200px;
background:pink;
}
#buff{
height:800px;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="buff"></div>
<a href="javascript: scroll()">Jump to top of page</a>
<script>
function scroll(){
var top = document.getElementById("top").scrollIntoView({behavior: 'smooth'}, true);
}
</script>
</body>
</html>
出力：
-Method-to-Scroll-to-Top.webp)
scrollTo() メソッドを使用して、JavaScript で Div の先頭にスクロールする
scrollTo() メソッドは、ビューポートの測定値をリセットするパラメーターを取ります。 通常、ビューポートの現在の状態は、x 軸と y 軸上に位置します。
後で、一番上のセグメントに到達するために、現在の位置をリセットします。これにより、div の一番上になります。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#top{
height:200px;
background:orange;
}
#buff{
height:800px;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="buff"></div>
<a href="javascript: scroll()">Jump to top of page</a>
<script>
function scroll(){
var top = document.getElementById("top")
window.scrollTo(0,0);
}
</script>
</body>
</html>
出力：
-Method-to-Scroll-to-Top.webp)
チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe
