最近よく見かける画面の右下に「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でスクロールすると表示する系いろいろ
コメントを残す