最近よく見かける画面の右下に「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でスクロールすると表示する系いろいろ
こんにちは。
Gumbyにてサイトを構築している者です。こちらのJQueryを使わせて頂きました。ひとつ、ナビゲーションバーをposition:fixedで固定した場合、戻る起点がナビゲーションの高さ分、ずれてしまい、ページ最上部に戻れません。
もし、解決策をご存じでしたらご教授ください!
度々すみません。本件、解決しました。
ページ内リンクのjsとかぶって上手く動作しなかったようです。
おじゃまいたしました・・・