JavaScript で ID までスクロール
-
JavaScript で
scrollIntoView()メソッドを使用して ID までスクロールする -
scrollTo()メソッドを手動ビュー計算で使用して、JavaScript で ID までスクロールする -
scrollLeftとscrollTopでscrollTo()メソッドを使用して、JavaScript で ID までスクロールする
一般的に、HTML 本文にアンカー タグを設定し、href を特定の ID に設定すると、その要素までスクロールできます。 しかし、この慣行は、動的なケースではほとんど歓迎されません。
同じウェブページの ID までスクロールすることを、内部リンクと呼びます。 次の例では、JavaScript メソッドを介して内部リンクを実行する方法を示します。
scrollIntoView() メソッドは、特定の ID までスクロールする最も信頼できる方法です。 しかし、最も重要なケースは、正しい querySelector を取得することです。
そうして初めて、その要素へのルーティングが可能になります。 次に、scrollTo() メソッドを使用してオフセットの注釈を設定します。
理解を深めるために、これらの方法を確認してみましょう。
JavaScript で scrollIntoView() メソッドを使用して ID までスクロールする
JavaScript で特定の ID にスクロールするには、scrollIntoView() メソッドを使用できます。
スクロールアップする
アクション リンクから上のセグメントの要素にスクロールするには、scrollIntoView() のパラメーターを true に設定します。 リンクをクリックすると、ページにストレスがかかり、上記のターゲットに到達することが保証されます。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#blue{
height: 200px;
background: blue;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id="blue"></div>
<div id="buff"></div>
<a href="javascript: scroll();">Get to BLUE</a>
<script>
function scroll(){
var getMeTo = document.getElementById("blue");
getMeTo.scrollIntoView({behavior: 'smooth'}, true);
}
</script>
</body>
</html>
出力：
下へスクロール
同様に、ここで追加のパラメーターを false に設定すると、違いが生じます。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#blue{
height: 200px;
background: blue;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<a href="javascript: scroll();">Get to BLUE</a>
<div id="buff"></div>
<div id="blue"></div>
<script>
function scroll(){
var getMeTo = document.getElementById("blue");
getMeTo.scrollIntoView({behavior: 'smooth'}, false);
}
</script>
</body>
</html>
出力：
scrollTo() メソッドを手動ビュー計算で使用して、JavaScript で ID までスクロールする
この例では、最初に要素を選択し、次にオフセット値も設定します。 次のステップでは、ボディの上部の位置を取得し、同様に .getBoundingClientRect() メソッドを介して要素の上部の位置を確認します。
次に、一般的な数学演算を実行して、スクロールに必要な測定値を取得します。 コード フェンスは、これをより直感的に示します。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#purple{
height: 200px;
background: purple;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id="purple"></div>
<div id="buff"></div>
<a href="javascript: scroll();">Get to Purple</a>
<script>
function scroll(){
const element = document.getElementById('purple');
const offset = 50;
const bodyRect = document.body.getBoundingClientRect().top;
const elementRect = element.getBoundingClientRect().top;
const elementPosition = elementRect - bodyRect;
const offsetPosition = elementPosition - offset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
</script>
</body>
</html>
出力：
-method-with-manual-calculation-of-the-view.webp)
scrollLeft と scrollTop で scrollTo() メソッドを使用して、JavaScript で ID までスクロールする
この例は、scrollTo() メソッドの属性を設定することを意味します。 構文は簡単に把握できます。
要素のインスタンスを取得し、element.scrollTop と element.scrollLeft を介してスクロールの上部と左の位置を設定します。 コードベースに飛び込みましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
#yellow{
height: 200px;
background: yellow;
}
#buff{
height:800px;
}
a{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<div id="yellow"></div>
<div id="buff"></div>
<a href="javascript: scroll();">Get to yellow</a>
<script>
function scroll(){
var getMeTo = document.getElementById("yellow");
window.scrollTo({
top: getMeTo.scrollTop,
left: getMeTo.scrollLeft});
}
</script>
</body>
</html>
出力：
-method-with-scrollleft-and-scrolltop.webp)
