スクロールボタンを導入するか考える
カテゴリーページは10件表示にしているが、抜粋文が10件もあると、やはり長いスクロールとなる。サイドバーを設けているので、いらないかな、と思っていたが、使い勝手としてあってもよいのではないかと思うようになった。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$( function () { var topBtn = $( '.to-top' ); topBtn.hide(); $( window ).scroll( function () { if ( $( this ).scrollTop() > 150 ) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } } ); topBtn.click( function () { $( 'body,html' ).animate( { scrollTop: 0 }, 500 ); return false; } ); } ); |
スクロールボタンの動作
本当はフッターでフェードアウトしたかったが、考えてみたら、フッターでこそいなくなったら困るボタン。
結局、フッターの上あたりに固定停止することにした。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.to-top { display: block; position: fixed; bottom: 130px; right: 30px; font-size: 2.5em } .to-top a { background: #9c9; text-decoration: none; color: #fff; padding: 2px 5px; text-align: center; display: block; border-radius: 50px } .to-top a:hover { text-decoration: none; opacity: .5 } .to-topfont { font-size: 2.5rem; vertical-align: middle } |
また、トップページ、エラーページなどはいらないので、ページごとに読み込めるよう、分岐条件を入れる。
1 2 3 4 |
<?php if ( is_page( array('portfolio', 'about' ) ) || is_archive() || is_category() || is_date() || is_search() || is_single() ): get_template_part( 'totop' ); endif; ?> |
webアイコンの読み込み速度
webアイコンの上矢印を利用したが、読み込むまでの間、文字が見えてしまう。速度などを早く読み込めるように工夫したものの、やはり時々びょーんと文字が見えてしまう。きっとアイコンには画像を入れた方が良いのだろうが、とりあえず運用してみる。
1 |
<div class="to-top"><a href="#wrap"><span class="material-icons to-topfont">keyboard_arrow_up</span></a></div> |
Comment