14時11分03秒 [Web関連]
ボタンを押すと、スムーズなスクロールアニメーションでWebページの上端に戻ったり下端へ進んだりするリンクボタンを簡単に作るHTML＋JavaScript＋CSSソースを紹介します。HTMLとJavaScriptソースは短い1行だけで済み、jQuery等は不要です。
ページ内リンクのリンク先へスムーズなアニメーションを伴ってスクロールさせるだけならCSSのscroll-behaviorプロパティを使って、html { scroll-behavior: smooth; }みたいに1行を書いておけばJavaScriptを使わなくても済むのですけども、その場合はリンク先の要素に何らかのid属性を加えて「ページ内リンクのリンク先」を作っておく必要がありますし（上端に戻る場合だけは例外ですが）、そのページ内のあらゆるページ内リンクが一括して対象になってしまう副作用や、URLの末尾に「#bottom」のようなアンカー名(ハッシュ文字列)が付いてしまう副作用もあります。JavaScriptを使えば、そういう「リンク先」が用意されていなくても「ページ内の座標」を指定してスクロールができるので（この場合には）楽な気がしますし、ページ内に存在する他のページ内リンクの動作には影響しませんし、URLの末尾には何も付きません。
というわけで、JavaScriptを併用して「ページの上端へ戻る」ボタンや「ページの下端へ進む」ボタンを作る方法を紹介します。
JavaScriptを併用すると言っても記述はとても簡単で、ボタン装飾用のCSSを含めても数行のソースを書くだけで作れます。
《目次》
なお、macOS版SafariではVer.14以降、iOS版SafariではVer 14.7以降でないとスムーズにスクロールしてくれません。しかし、その場合でも移動自体は可能なので、上端や下端へ移動するボタンとしては機能します。
まず、ページの上端に戻るのはとても簡単です。要は、そのページ内の座標(0,0)へ移動すれば良いので、JavaScriptのwindow.scrollToメソッドに座標 top:0, left:0 を指定して、スムーズにスクロールするように behavior: 'smooth' を加えるだけです。
このJavaScriptを、リンク(a要素)のclickイベントで呼び出せば良いでしょう。
なので、ページ上端へ戻るリンクを作るHTML＋JavaScriptソースとしては、以下の1行だけで済みます。
<a href="#" onclick="window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); return false;">ページ上端へ戻る</a>
この記述で指定座標へスムーズにスクロールしてくれます。, behavior: 'smooth' の部分を消せば一瞬で移動します。
本来のa要素の動きを抑制するために、最後にreturn false;を書くのを忘れないで下さい。
表示例は以下の通りです。クリックすると実際に動作します。（注：既にページの上端が見えている状況では、押しても動きません。少しスクロールしてから試して下さい。）
とても簡単に作れますが、上記のソースだけだと「ただのテキストリンク」にしか見えません。
CSSを使ってボタンっぽく見せる方法は後述します。
ページの下端にサイトマップ的なテキストリンクが用意されているとか、ページの下端に何らかの重要なナビゲーション機能があるなどの場合は、ページの下端へ一気に進むボタンも用意されていると便利かもしれません。特にモバイル端末だと、下端へ一気にスクロールするUIはブラウザ側に用意されていなさそうですし。
ページの上端なら座標が(0,0)なので簡単ですが、ページの下端の座標はそのページによって異なります。とはいえ、大きすぎる値を指定しておけばスクロールは下端で止まってくれますから、9999999(ピクセル)みたいな充分大きな値を指定しておくのが楽な気がします。
したがって、ページ下端へ進むリンクを作るHTML＋JavaScriptソースとしては、以下の1行だけで済みます。
<a href="#" onclick="window.scrollTo({ top: 9999999, left: 0, behavior: 'smooth' }); return false;">ページ下端へ進む</a>
しかし、9999999のような大きすぎる値を指定するのは邪道だ！ともし思うのなら、body要素の高さを取得して、それを使えば良いかもしれません。
body要素の高さは document.getElementsByTagName('body')[0].clientHeight で分かりますから、これをwindow.scrollToメソッドの引数に指定すると良いでしょう。
その場合は、以下のようなソースになります。
<a href="#" onclick="window.scrollTo({ top: document.getElementsByTagName('body')[0].clientHeight, left: 0, behavior: 'smooth' }); return false;">ページ下端へ進む</a>
どちらにせよ簡単に作れますね。
※ただ、body要素の高さはbody要素全体の読み込みが完了するまで判明しませんから、ページの読み込みが終わらないうちにボタンを押されるとうまく動かないかも知れません。たいていは問題ないと思いますが、よほどサイズ不定の画像をたくさん読み込んでいるページだとか、「読み込み完了前」と「読み込み完了後」とでページ下端の座標が大きく異なってしまうページの場合には、別途フッタ部分にidを割り振っておいて、getElementByIdでその座標を取得して、そこへ移動するよう書いた方が良い場合もありそうな気はします。ただ、フッタ部分にidを割り振る手間を掛けられるのならCSSのscroll-behaviorプロパティを使った方が楽なのではないか、とか、9999999ピクセルのような「充分に大きな値」を指定しておく方法で妥協する方が楽なのではないか、とも思いますけどもね。(笑)
表示例は以下の通りです。クリックすると実際に動作します。
上記のソースだけだと、先程と同じように「ただのテキストリンク」にしか見えません。
CSSを使ってボタンっぽく見せる方法は後述します。
「ページ上端に戻るボタン」と「ページ下端に進むボタン」の両方を掲載する場合や、どちらかまたは両方のボタンを複数個掲載する場合は、（単に先程紹介したソースをそのまま何度も書くのでも良いのですが）スクリプト部分を独立してscript要素に記述しておく方が記述総量が少なくて良いかもしれません。例えば下記のようにです。
<script>
function scrollbtn( scpos ) {
window.scrollTo({ top: scpos, left: 0, behavior: 'smooth' });
}
</script>
<a href="#" onclick="scrollbtn(0); return false;">ページ上端へ戻る</a>
<a href="#" onclick="scrollbtn(9999999); return false;">ページ下端へ進む</a>
上記のソースでは、window.scrollToメソッドを使ってスクロールする部分を独立したscript要素の中に書いておいて、リンク(ボタン)を作るa要素ではその関数を呼び出すだけにしています。関数の引数にはスクロール先の座標を指定するようにしています。これだと、ボタンをたくさん掲載する場合でも同じスクリプトを何度も書く必要がなくなって、ちょっと短く済むでしょう。script要素は、head要素の中やbody要素の最初の方など、「ボタンを作るHTMLソース」が現れる位置よりも前に記述しておきます。
さて、これまでのソースでは単なるテキストリンクにしか見えませんので、スクロールするボタンらしく見えるようにHTMLを追記した上で、CSSで装飾をしてみます。
この辺は好みの問題なので、いくらでも作りようがありますから、下記のソースはあくまでも例の1つですけども。
まず、HTML＋JavaScript部分のソースは、以下のように書きます。
<script>
function scrollbtn( scpos ) {
window.scrollTo({ top: scpos, left: 0, behavior: 'smooth' });
}
</script>
<div class="scrollBtns">
<a href="#" onclick="scrollbtn(0); return false;"><span class="label">上端へ</span><span class="arrow">▲</span></a>
<a href="#" onclick="scrollbtn(9999999); return false;"><span class="arrow">▼</span><span class="label">下端へ</span></a>
</div>
先程のソースから行数が増えていますが、JavaScriptソース部分は何も変わっていません。HTML部分は、
……という部分の分量が増えただけです。
次に、CSSで装飾を加えます。
ソースが長そうに見えますが、それはそれぞれの意味をソースの右側にコメントの形で書いたためです。実際には各プロパティを1行ずつ繋げて書けば、6行程度で済みます。
<style type="text/css"> /* ▼配置 */ .scrollBtns { position: fixed; /* ボタンを画面内の指定位置に固定表示する */ bottom: 1em; /* 画面の下端から1文字分の距離 */ right: 1em; /* 画面の右端から1文字分の距離 */ max-width: 3em; /* 最大幅：3文字分 */ } /* ▼ボタンの装飾 */ .scrollBtns a { display: block; /* ブロック化(全体をクリック可能にするため) */ margin: 3px 0; /* 外側の余白：上下→左右 */ padding: 0.4em 0.3em; /* 内側の余白：上下→左右 */ color: white; /* 文字色：白色 */ background-color: blue; /* 背景色：青色 */ border-radius: 12px; /* 角を丸くする：半径12ピクセルで */ opacity: 0.6; /* 半透明にする(＝不透明度60％／つまり背後が40％透けて見える) */ line-height: 1; /* 行の高さを詰める */ text-decoration: none; /* リンクの下線を付けない */ text-align: center; /* 文字をセンタリングする */ } /* ▼マウスが載ったときの装飾変更 */ .scrollBtns a:hover { background-color: red; /* 背景色：赤色 */ } /* ▼矢印記号 */ .arrow { display:block; font-size:1.5em; } /* 1.5文字分の大きさ */ /* ▼ラベル */ .label { display:block; font-size:0.67em; } /* 0.67文字分の大きさ */ </style>
配置やサイズを微調整したい場合は、太字のところだけを好きなように書き換えて下さい。（いや、もちろん太字でないところも好きなように書き換えて頂いて良いのですけども。：笑）
ボタンの表示例は下記の通りです。（※実際に画面右下に固定配置してしまうと例示しにくいので、ここでは /* ▼配置 */ の部分は除外して掲載しています。なので、画面に対して固定はされていません。） クリックすると実際に動作します。
コンテンツの末尾に「上端に戻る」リンクを用意したいだけなら、このように（画面に対しては）固定せずに、ただ普通のリンクボタンとして本文中に掲載しておく形でも良いでしょうね。
なお、ここで作った「上端へ戻る／下端へ進む」ボタンは、拙作のフリーCGI「てがろぐ」の設定画面で表示するために作ったものです。下図のような感じで画面右下に常に固定表示されるボタンになっています。
以上、ページの上端に戻ったり下端へ進んだりするボタンを作る方法でした。
HTMLで任意の要素にid属性を使ってid名を割り振っておけば、a要素でページ内リンクが作れます。例えば、<h1 id="maintitle">～</h1>のような要素があるなら、<a href="#maintitle">～</a>のようにリンクを書いておけば、h1要素へ移動するページ内リンクになります。
このとき、そのページ内リンクをスムーズなスクロール動作で移動させたいなら、単にCSSでhtml { scroll-behavior: smooth; }と書いておけば良いだけです（※リンクを作るa要素に指定するわけではない点に注意）。わざわざJavaScriptを使う必要はありません。
ただ、この場合には移動先の要素にid属性値が割り振られている必要がありますし（でなければリンク先の位置を示せませんから）、ページ内のすべての「ページ内リンク」が対象になります。
今回の解説で紹介したソースのようにJavaScriptを使えば、このような「リンク先位置」を事前に用意しておかなくても済みますし、ページ内に存在する他のページ内リンクには影響しません。
この日記へのコメントはお気軽に！ コメント数:0件
コメント数： 0件
