Re: 【ノンデザイナー向け】 WordPress で今風なページトップを超簡単に設置する方法

2011年くらいから、
ページをスクロールすると、フワっと表示されるページトップ（クリックするとページの一番上にいくやつ）が
流行ってますよね！　超簡単にコピペするだけで作れるソース作ったので、公開します！

via. 【ノンデザイナー向け】Wordpressで今風なページトップを超簡単に設置する方法 | しらさかブログ

僕が WordPress に実装するなら、こうかな？
以下を functions.php に追加。

// テーマの head 部で jQuery を読み込む
add_action('wp_print_scripts', 'add_print_scripts_jquery');
function add_print_scripts_jquery() {
    wp_enqueue_script('jquery');
}

// Scroll to Top 用のスタイルを head 部に追加
add_action('wp_head', 'add_scroll_to_top_style');
function add_scroll_to_top_style() {
    ?>
<style type="text/css">
#pagetop { display:none;position:fixed;right:10px;bottom:10px;z-index:100; }
#pagetop a { padding:5px;background:#ccc;color:#fff;display:block;font-size:20px;font-weight:bold;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px; }
</style>
    <?php
}

// Scroll to Top 用の JavaScript をフッター部に追加
add_action('wp_footer', 'add_scroll_to_top');
function add_scroll_to_top() {
    ?>
<script type="text/javascript">
jQuery(function($){
    $('body').append(
        $('<div id="pagetop">')
        .append(
            $('<a href="#">↑</a>')
            .click(function(){$('html,body').animate({scrollTop:0}, 800, 'swing')})
            )
        );
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#pagetop').fadeIn();
        } else {
            $('#pagetop').fadeOut();
        }
    });
});
</script>
    <?php
}

本当は、css とか JavaScript とかは別ファイルにして外出ししたほうが良いと思うけど、まぁ簡単にコピペでできるってことで。