Nov 23, 2013

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

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

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

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

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

多様なjQueryの機能を利用するために必要な親玉?をサーバに設置するか、Google Developersから引っ張ってくる必要があります。ここでは後者をオススメしています。
// 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>
jquery.scrollUp.jsは先ほどDLしたZIPファイルを解凍すると入っているので、FTPでJSファイルを格納しているディレクトリにUPして、そのパスをhead内に記述します。

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

headを閉じる直前の場所に以下のコードを記述します。
<script type="text/javascript">
   $(window).load(function (){
      $.scrollUp();
   });
</script>
</head>

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

jquery.scrollUp.jsをテキストエディタで開いた88-103行目あたりにコントロールパネル的なものがあります。たとえば”Fade”を選ぶとボタンがフワッと現れ、”Slide”を選ぶとニュッと飛び出してきます。かなり細かい指定が可能なので遊んでみてください。以下は当サイトでの実例です。
    // 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.スタイルシートでボタンの形状をカスタマイズ

任意のCSSファイル(たとえばstyle.css)に以下のコードを記述します。これは自前で画像を用意した当サイトの例ですので、予め用意されたボタンを使うならサンプルのCSSを利用するといいでしょう。
#scrollUp {
    bottom: 0;
    right: 0;
    background: url(img/totop.png) no-repeat;
    width: 300px;
    height: 220px;
    color: #fff;
    text-indent: -9999px;
}


どうですか。超簡単ですね!
今回のエントリはこちらを参考にさせていただきました。

[JS]スクロールに追従するページの先頭へアニメーションで戻るボタンが簡単に設置できるスクリプト -scrollUp | コリス



Leave a Reply

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

サイト内検索
  • Author

  • Twitter

    Follow @jay0926 (535 followers)
  • Facebook