Gumbyを使ってPageTopに戻るボタンを作ってみる

最近よく見かける画面の右下に「PAGE TOP」に戻るボタンをGumbyを使って表示します。
WordPressのfunctions.phpに追加
簡単にできるようにCSS/Javascriptもインライン化していますが
別ファイルに記載しても良いと思います。

function gumby_page_top() { ?>
	<div id="return" class="pretty medium info btn">
		<a href="#header" class="skip" gumby-goto="#header" gumby-offset="-60">PAGE TOP</a>
	</div>
	<style>
		#return {
			position: fixed;
			bottom: 20px;
			right: 20px;
			opacity: 0.8;
		}
	</style>
	<script defer>
		jQuery(function() {
			var returnBtn = jQuery('#return');    
			returnBtn.hide();
			jQuery(window).scroll(function () {
		        if (jQuery(this).scrollTop() > 100) {
		            returnBtn.fadeIn();
		        } else {
		            returnBtn.fadeOut();
		        }
		    });
		});
	</script>
<?php
}

add_action('wp_footer','gumby_page_top');

こちらのサイトを参考にさせていただきました。
jQueryでスクロールすると表示する系いろいろ

2 Comments

  1. Yoriko Kino

    こんにちは。
    Gumbyにてサイトを構築している者です。こちらのJQueryを使わせて頂きました。ひとつ、ナビゲーションバーをposition:fixedで固定した場合、戻る起点がナビゲーションの高さ分、ずれてしまい、ページ最上部に戻れません。
    もし、解決策をご存じでしたらご教授ください!

  2. Yoriko Kino

    度々すみません。本件、解決しました。
    ページ内リンクのjsとかぶって上手く動作しなかったようです。
    おじゃまいたしました・・・

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です