スクロールするとフェードインしてくるトップへ戻るボタン

当ブログは新しいブログに移転しました。
5秒後に新しいブログに切り替わります。

https://www.simplecore.site/

今後とも引き続きよろしくお願いいたします。

simplecore.site

f:id:simplecore:20170608103715j:plain

このブログをリニューアルした際に、トップへ戻るボタンを設置しました。スクロールすると画面の右下にフワッと出てくるボタンです。少し長いページの場合、あると中々便利だと思います。一番下まで行って、またスクロールで一番上まで戻る・・・個人的には結構ストレスです。

ひと昔前だと、ページの最下部にボタンがポンと置いてあるだけなのが普通でしたが、逆に考えると、ページの一番下まで行かないと、簡単にページ上部に戻れないという、今考えると本末転倒な感じでした。

そんなトップへ戻るボタン（もっと簡単な言い方無いんですかね？）ですが、今回紹介する設置方法でしたら、タイトルにもある通り、少しスクロールすると常に画面に表示されるので、ユーザー目線で考えても意外と使いやすいんじゃないかな？と思っています。コピペですぐに設置できるので、興味があったら試してみてはいかがでしょうか？

基本の設置方法
バリエーション

基本の設置方法

jqueryとjavascriptを読み込む

まず<head>タグ内で、下記のようにjqueryとjavascriptを読み込ませます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var topBtn = $('#page-top');	
	topBtn.hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
	//スクロールしてトップ
    topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
    });
});
</script>

はてなブログの場合は、「ダッシュボード」＞「設定」＞「詳細設定」の、「検索エンジン最適化」という項目にある、「headに要素を追加」にコピペしてください。

7行目にある

if ($(this).scrollTop() > 100) {

「100」という数値が、ボタンが出てくるまでのスクロールの距離になります。お好みに応じて適当にいじってみてください。変になったら100に戻せば良いだけなので。

HTML部分を追記する

ページの下の方に下記のHTMLを追記してください。僕はいつもは<footer>の直前くらいに記述します。

<p id="page-top"><a href="#wrap">PAGE TOP</a></p>

はてなブログの場合は、「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「フッタ」にコピペで。

CSS部分を追記する

CSSファイルに下記ソースを追記してください。

#page-top {
    position: fixed;
    bottom: 20px; /*画面の下から測ったボタンの位置*/
    right: 20px;　/*画面の右から測ったボタンの位置*/
    font-size: 77%;
}
#page-top a {
    background: #ddd;　/*ボタンの色*/
    text-decoration: none;
    color: #555;　/*ボタン内のテキストの色*/
    text-align: center;
    display: block;
    border-radius: 40px;
    width: 80px;
    height: 45px;
    padding-top: 35px;
}
#page-top a:hover {
    text-decoration: none;
    background: #eee; /*カーソルを当てた際のボタンの色*/
}

はてなブログの場合は、「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「デザインCSS」にコピペで。

ボタンにカーソルを当てたときに、ボタン内のテキストの色も変えたいときは、3つ目のCSSを以下のようにしてください。

#page-top a:hover {
    text-decoration: none;
    background: #eee;
    color: #000; /*カーソルを当てた際のボタン内のテキストの色*/
}

なお、今回参考にさせてもらったサイトはこちらです。他にも色々と面白い動きの設定方法が丁寧に書かれているので、ぜひご覧になってはいかがでしょうか？

www.webopixel.net

バリエーション

正方形

f:id:simplecore:20170608101737j:plain

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #ddd;
    text-decoration: none;
    color: #555;
    text-align: center;
    display: block;
    width: 80px;
    height: 45px;
    padding-top: 35px;
}
#page-top a:hover {
    text-decoration: none;
    background: #eee;
}

角丸正方形

f:id:simplecore:20170608101857j:plain

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #ddd;
    text-decoration: none;
    color: #555;
    text-align: center;
    display: block;
    border-radius: 10px;
    width: 80px;
    height: 45px;
    padding-top: 35px;
}
#page-top a:hover {
    text-decoration: none;
    background: #eee;
}

三角ボタン

f:id:simplecore:20170608102933j:plain

HTMLはこちら

<p id="page-top"><a href="#wrap"></a></p>

CSSはこちら

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
#page-top a {
    text-decoration: none;
    color: #555;
    display: block;
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-bottom: 40px solid #ddd; /*#dddがボタンの色*/
}
#page-top a:hover {
    text-decoration: none;
    border-bottom: 40px solid #eee;　/*#eeeがカーソルを当てた際のボタンの色*/
}