大阪市西区　Wild Cards ワイルドカーズ

ある一定の位置までスクロールしたらページ最下部にニョキッと現れる「TOPに戻る」ボタン。

通常のよくあるボタンでは面白くないので、当サイトではサラリーマン風の男性がガッツポーズで飛び出す感じにしました。某ドラマの常務ではありません。

scrollUp jQuery plugin — Mark Goodyear — Front-end developer and designer

↑　プラグイン本体やサンプルはこちらからDLできます。

1.jQuery本体とプラグインをhead内で指定

// jQueryライブラリ
<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"/></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"/></script>
// scrollUpプラグイン
<script src="//●●●.com/wp-content/themes/●●/js/jquery.scrollUp.js" type="text/javascript"/></script>

2./head直前に呼び出し用コードを記述

<script type="text/javascript">
   $(window).load(function (){
      $.scrollUp();
   });
</script>
</head>

3.表示のタイミングやエフェクトなどを編集

    // Defaults
    $.fn.scrollUp.defaults = {
        scrollName: 'scrollUp', // Element ID
        scrollDistance: 1300, // TOPからボタンが現れるまでの距離 (px)
        scrollFrom: 'top', // 'top' or 'bottom'
        scrollSpeed: 300, // Speed back to top (ms)
        easingType: 'linear', // Scroll to top easing (see http://easings.net/)
        animation: 'slide', // Fade, slide, none
        animationInSpeed: 300, // Animation in speed (ms)
        animationOutSpeed: 300, // Animation out speed (ms)
        scrollText: '※大和田常務ではありません', // Text for element, can contain HTML
        scrollTitle: false, // Set a custom <a> title if required. Defaults to scrollText
        scrollImg: false, // Set true to use image
        activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
        zIndex: 2147483647 // Z-Index for the overlay
    };

4.スタイルシートでボタンの形状をカスタマイズ

#scrollUp {
    bottom: 0;
    right: 0;
    background: url(img/totop.png) no-repeat;
    width: 300px;
    height: 220px;
    color: #fff;
    text-indent: -9999px;
}