HOWTO · JavaScript
JavaScript で ID までスクロール
特定の ID または要素にスクロールするには、JavaScript メソッドを使用してアンカー タグをトリガーします。 scrollIntoView、scrollTo メソッドをオフセット位置で使用すると、指定した要素にジャンプするプロセスが非常に便利になりました。
一般的に、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>
出力：
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>
出力：
