ページの先頭へ戻るボタンはJavascriptを使わずにできることはできます。
でもJavascriptを使うことで、
- 一定量スクロールしたらボタンを表示
- スムーズスクロールでぬるっと戻る
という表現ができます。
極限まで軽量化・高速化にこだわるならjQueryっていうかJavascriptは使わない方がいいんだけど・・・
ある程度の見た目や動きはカッコよく見えていいよね！
ということで、ページの先頭へ戻るボタンをjQueryライブラリを使わずに実装した様子をメモします。
ページの先頭へ戻るボタンのhtml部分
わたしの場合は以下のように書いています。
<div id="pagetop" class="pagetop totop1"><a href="#bnp_top" aria-label="To Top"></a></div>大事なのは「id=pagetop」の部分。
ここでページの先頭へ戻るボタンを認識します。
後の部分は人によっていろいろな風に書かれていると思います。
ページの先頭へ戻るボタンのJavascript部分
一定量スクロールしてから表示させるのと、スムーズスクロールで先頭に戻る動作をJavascriptでやっています。
一定量スクロールしたら表示
まず一定量で表示させるために以下のように。
<script>
var ywsa = document.getElementById("pagetop");
var yws_pagetop = function() {
if (window.pageYOffset > 400) {
ywsa.classList.add("fixed")
} else {
ywsa.classList.remove("fixed")
}
};
</script>window.pageYOffset > 400 は400pxスクロールしたらという意味です。
スクロールした際にidが ”pagetop” の要素に ”fixed” というクラスを付けています。
つまり、400px以上下にスクロールしている時のみ、idが ”pagetop” の要素に ”fixed”というクラスを付ける、ということです。
これ自体で表示・非表示を制御しているわけではありませんが、クラスで判別できればCSSでも簡単に表示・非表示ができるよね。
スムーズスクロール
スムーズスクロールは以下を参考にしました。
https://qiita.com/yarimo/items/96aac26cdf764c4f5494
わたしは以下のようにして使っています。
<script>
window.addEventListener("load", yws_pagetop);
window.addEventListener("scroll", yws_pagetop);
ywsa.addEventListener('click', (e) => {
e.preventDefault();
window.scroll({
top: 0,
behavior: 'smooth'
})
});
</script>これが無いと、ボタンをクリックした際に一瞬で先頭に戻ります。
別にスムーズスクロールはなくても機能上は全く問題ないから、好みの問題(*´ω｀*)
Javascript部分をまとめると以下になります。
<script>
var ywsa = document.getElementById("pagetop");
var yws_pagetop = function() {
if (window.pageYOffset > 400) {
ywsa.classList.add("fixed")
} else {
ywsa.classList.remove("fixed")
}
};
window.addEventListener("load", yws_pagetop);
window.addEventListener("scroll", yws_pagetop);
ywsa.addEventListener('click', (e) => {
e.preventDefault();
window.scroll({
top: 0,
behavior: 'smooth'
})
});
</script>Javascriptはたったこれだけで400pxスクロールしたらフワっと表示されて、ボタンを押したらぬるぬるっと先頭に戻る動作が付け加えられます。
もちろんjQueryは不使用です。
ページの先頭へ戻るボタンのCSS部分
デザイン部分のCSSを紹介している記事はいっぱいあるので割愛！
ここではスクロールした時の表示・非表示をするCSSを書いておきます。
#pagetop{
height:0;
opacity:0;
transition: 0.3s;
visibility:hidden;
}
#pagetop.fixed{
height:auto;
opacity:.7;
visibility:visible;
}これはわたしの場合の例だけど、表示・非表示でフワっとフェードイン・フェードアウトするように書いています。
フワっとした動きが必要なければdisplay:none、display:blockとかが簡単だと思います。
動作デモ
実際の動作はこのブログの通りです。
スクロールしたらページの先頭へ戻るボタンが表示されるのが確認できると思います。
スムーズスクロールはページの先頭へ戻るボタンのみに有効なので、例えば目次の項目をクリックした時などはスムーズスクロールしません。
最近では画像遅延読み込みは当たり前のようにみんなやってると思うけど、プラグインやテーマの相性によっては目次の項目をクリックした際に、着地地点がズレるっていう人はいるんじゃないかな。
この方法ならそういうのは防げると思います。
あとがき
WordPressの表示速度にこだわるあまり、先日jQueryライブラリの読み込みを停止しました。
プラグインによってはjQueryライブラリ必死のものもあるから、普通の人はやらなそうだけど(*´ω`*)
管理画面やログイン中はadminバーとかあって削除できないから、一般公開する時のみね。
停止したってことは前は読み込んでたことになるんだけど、使っていたのは、
- ページの先頭に戻るボタン
- スムーズスクロール
のみです。
これだけのためにjQueryライブラリ読み込むのはどうかと思うでしょ？（笑
jQueryライブラリを読み込まなくした結果、どれくらいPageSpeed Insightsのスコアが改善したかというと・・・
２～３程度です(;’∀’)
わたしのケースでは。
コメントを残す