迷ったらコレ！ JavaScript/jQueryでページトップへスクロールするおすすめの方法とサンプルコード集
JavaScript/jQuery でページトップへスクロールする方法
JavaScript
window.scrollTo() メソッドを使用する
最もシンプルな方法は、window.scrollTo() メソッドを使用する方法です。 以下のコードは、ページトップへ瞬間的にスクロールします。
window.scrollTo({
top: 0,
behavior: "smooth"
});
このコードでは、top プロパティを 0 に設定することで、ページトップを指定しています。 また、behavior プロパティを "smooth" に設定することで、滑らかなスクロールを実現しています。
jQuery を使用すると、より柔軟なスクロールを実現できます。 以下のコードは、ページトップへアニメーション付きでスクロールします。
$(window).scrollTop(0);
このコードは、scrollTop() メソッドを使用して、現在のスクロール位置を 0 に設定しています。 jQuery の場合、animate() メソッドを使用することで、アニメーション付きのスクロールを実現することもできます。
例：アニメーション付きスクロール
$(window).animate({
scrollTop: 0
}, 500, "swing");
このコードでは、animate() メソッドを使用して、500ミリ秒かけてページトップへスクロールします。 "swing" オプションは、デフォルトのアニメーションイージングを指定します。
その他のポイント
- スムーススクロール: 上記の例では、いずれの方法もスムーススクロールを実装しています。 スムーススクロールは、ユーザーエクスペリエンスを向上させるために重要です。
- ページトップボタン: ページトップへ戻るボタンを設置する場合は、クリックイベントを使用して上記のスクロール処理を実行できます。
- CSS: ページトップボタンをスタイリングするには、CSS を使用します。
JavaScript または jQuery を使用して、ページトップへスムーズにスクロールすることができます。 上記のコード例を参考に、ご自身のニーズに合わせて実装してください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページトップへスクロール</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>ページトップへスクロール</h1>
</header>
<main>
<p>このページは長い文章で構成されています。</p>
<p>長い文章で構成されています。</p>
<p>長い文章で構成されています。</p>
<p>長い文章で構成されています。</p>
<p>長い文章で構成されています。</p>
</main>
<footer>
<button id="pageTopBtn">ページトップへ</button>
</footer>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: sans-serif;
}
header {
background-color: #f0f0f0;
padding: 20px;
}
main {
padding: 20px;
}
footer {
text-align: center;
padding: 20px;
}
#pageTopBtn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
JavaScript
$(document).ready(function() {
$('#pageTopBtn').click(function() {
$(window).animate({
scrollTop: 0
}, 500, 'swing');
});
});
このコードを参考に、ご自身のニーズに合わせてカスタマイズしてください。
JavaScript/jQuery でページトップへスクロールする方法：その他の方法
history.scrollRestoration API は、HTML5 で導入された新しい API であり、ページ遷移時のスクロール位置を保持することができます。 以下のコードは、この API を使用して、ページトップへ戻る場合に前回のスクロール位置を復元します。
history.scrollRestoration = 'auto';
アンカー要素を使用する
ページ内に id 属性を持つアンカー要素 (<a>) を配置し、その id に合わせた URL を生成することで、ページトップへスクロールできます。 以下の例では、#top という ID を持つアンカー要素を作成し、その URL (#top) をクリックするとページトップへスクロールするようにしています。
HTML
<a href="#top" id="pageTopBtn">ページトップへ</a>
CSS
#pageTopBtn {
/* ... スタイル ... */
}
JavaScript
$('#pageTopBtn').click(function() {
$('html, body').animate({
scrollTop: 0
}, 500, 'swing');
});
スムーススクロールライブラリを使用する
smoothscroll.js や page-scroll などのスムーススクロールライブラリを使用すると、より高度なアニメーション付きのスクロールを実現できます。 これらのライブラリは、通常、npm や yarn などのパッケージマネージャーを使用してインストールする必要があります。
例：smoothscroll.js を使用する
<script src="https://unpkg.com/smoothscroll@latest/dist/smoothscroll.min.js"></script>
smoothScroll.init({
selector: '#pageTopBtn',
speed: 500,
easing: 'swing'
});
上記のコードは、smoothscroll.js ライブラリを使用して、#pageTopBtn ボタンをクリックするとページトップへ500ミリ秒かけてスムーズにスクロールするように設定しています。
JavaScript と jQuery でページトップへスクロールを実現するには、様々な方法があります。 上記に紹介した方法はほんの一例であり、ご自身のニーズに合わせて最適な方法を選択してください。
javascript jquery html
