はじめに
ご覧いただきありがとうございます！
作って学ぶWeb制作、今回からは中級編としてページトップへ戻るをHTML・CSS・JavaScriptで実装していきます。
コンテンツが多く縦に長いサイトやメニューが上部のヘッダーに設置されているサイトでよく見かけますね。初級編で登場したクリックイベントもあるのでぜひ復習もかねて作っていただけたら嬉しいです。
では今回作るもののデモと仕様を確認していきます。
デモ
ページを下へスクロールすると右下にボタンが表示されます。クリックするとページの最上部へと移動します。
仕様
以下の仕様をもとに実装を進めていきます。
一定量スクロールするとトップへ戻るボタンが表示される
トップへ戻るボタンをクリックしたときにページ最上部へスクロールする
トップへ戻るボタンにhoverしたときは背景色とアイコンの色を変える
今回もcss、jsファイルは外部ファイルとしてhtmlで読み込みます。
【実践】トップへ戻る機能を実装する
HTMLを準備する
まずはページに表示するコンテンツとボタンの要素をHTMLに記載していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>トップへ戻るボタンサンプル</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.7.2/css/all.css">
</head>
<body>
<!-- start main contents -->
<main>
<h1>作って学ぶWeb制作 中級 <br>トップへ戻るボタンを実装してみよう！</h1>
<div class="contents">
<p>スクロールしてください↓↓↓</p>
<p>スクロールしてください↓↓↓</p>
<p>スクロールしてください↓↓↓</p>
<p>スクロールしてください↓↓↓</p>
<p>スクロールしてください↓↓↓</p>
</div>
<div id="totop" class="pagetop">
<i class="fa-solid fa-angle-up fa-2x"></i>
</div>
</main>
<!-- end main contents -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>ソースコード ポイント解説
17~21行目の”tab-button”がタブを選択するボタン、24~28行目が”tab-contents”で実際に表示される中身のコンテンツ部分になります。
<div id="totop" class="pagetop">
<i class="fa-solid fa-angle-up fa-2x"></i>
</div>CSSでスタイルを追加する
body {
background-color: #d3f9e5;
}
h1 {
font-family: "Arial", sans-serif;
}
.contents {
height: 200vh;
}
.contents p {
font-size: 20px;
font-weight: bold;
margin-bottom: 160px;
text-align: center;
}
.pagetop {
cursor: pointer;
position: fixed;
right: 30px;
bottom: 40px;
width: 50px;
height: 50px;
border-radius: 12px;
transition: .2s;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
box-shadow: 0 0 6px #4bd254;
/* デフォルト非表示 */
opacity: 0;
}
.pagetop i {
color: #4bd254;
}
.pagetop:hover {
background-color: #bef4d9;
}
.pagetop:hover i {
color: #379e3d;
}ソースコード ポイント解説
ボタンはデフォルトで非表示にしておきたいのでopacityを0に設定しています。
.pagetop {
cursor: pointer;
position: fixed;
right: 30px;
bottom: 40px;
width: 50px;
height: 50px;
border-radius: 12px;
transition: .2s;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
box-shadow: 0 0 6px #4bd254;
/* デフォルト非表示 */
opacity: 0;
}Javascriptでスムーススクロールの動きをつける
const btn = document.getElementById('totop');
// ボタンをクリックしたら上部へ移動するイベントを実行
btn.addEventListener('click', toTop);
// スクロールされたらトップへ戻るボタンを表示
window.addEventListener('scroll', pageScroll);
function pageScroll() {
if (window.pageYOffset > 120) {
btn.style.opacity = '1';
} else if (window.pageYOffset < 120) {
btn.style.opacity = '0';
}
}
// ページ上部へ移動
function toTop() {
window.scroll({
top: 0,
behavior: 'smooth'
});
}ソースコード ポイント解説
window.addEventListener('scroll', pageScroll);
function pageScroll() {
if (window.pageYOffset > 120) {
btn.style.opacity = '1';
} else if (window.pageYOffset < 120) {
btn.style.opacity = '0';
}
}ページをスクロールするとscrollイベントが発生します。イベントが発生したときに実行される関数がpageScrollです。ページがスクロールボタンのopacityの値をスクロール量によって切り替えています。
pageYOffset …ウィンドウの上端を基準としたときの現在表示されているコンテンツの上端までの距離
function toTop() {
window.scroll({
top: 0,
behavior: 'smooth'
});
}23～29行目が上にスクロールする動きの実装部分です。scrollメソッドはウィンドウを特定の位置までスクロールするメソッドです。オプションでスクロール時のアニメーションを指定でき、今回は滑らかにスクロールさせたいためsmooth指定しています。
- behavior…スクロール時アニメーション設定
-
- auto＝ブラウザの初期動作
- instant＝アニメーションなし(瞬間的に移動する)
- smooth＝スムーズにスクロール
※初期値はautoになっており、多くの場合instantと同じつま動作になります。
まとめ
今回の作って学ぶWeb制作中級編ではトップへ戻るボタンとスムーススクロールを実装してみました！ブログやホームページなどを見ていて最上部のメニューに戻りたいときがありますが、そんな時に便利な機能でした。このブログにも右下にピンクのボタンが設置されています。ボタンの形や色、中のアイコンなどをカスタマイズしてみても良いですね！最後までお読みいただきありがとうございました。
