スクロールボタンを導入するか考える

カテゴリーページは10件表示にしているが、抜粋文が10件もあると、やはり長いスクロールとなる。サイドバーを設けているので、いらないかな、と思っていたが、使い勝手としてあってもよいのではないかと思うようになった。

			$( 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;
				} );
			} );

スクロールボタンの動作

本当はフッターでフェードアウトしたかったが、考えてみたら、フッターでこそいなくなったら困るボタン。

結局、フッターの上あたりに固定停止することにした。

.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
	}

また、トップページ、エラーページなどはいらないので、ページごとに読み込めるよう、分岐条件を入れる。

<?php
if (  is_page( array('portfolio', 'about' ) ) || is_archive() || is_category() || is_date() || is_search() || is_single() ):
get_template_part( 'totop' );
endif;	?>

webアイコンの読み込み速度

webアイコンの上矢印を利用したが、読み込むまでの間、文字が見えてしまう。速度などを早く読み込めるように工夫したものの、やはり時々びょーんと文字が見えてしまう。きっとアイコンには画像を入れた方が良いのだろうが、とりあえず運用してみる。

<div class="to-top"><a href="#wrap"><span class="material-icons to-topfont">keyboard_arrow_up</span></a></div>