SimplicityにjQuery smooth scrollの導入と微調整をしてみた

今日はタイトル通りストレートで何のひねりも無い感じですが、SimplicityにSmooth Scrollの機能を導入してみたいと思います。と言うか、今ここでする話でも無いですが、スムースとスムーズってどっちを使ったらいいのか未だによくわかってなかったりします。

スポンサーリンク

SimplicityのSmooth Scrollはトップへ戻る限定だった

実は私、SimplicityにはこのSmooth Scrollの機能がデフォルトで装備されてると思ってたんですよ。それはなぜかと言うと画面をスクロールした時にフェードしながら出て来る「トップへ戻るボタン」があったからでして、あのボタンを押すといい感じにスルスルっとページのトップに戻るんですよね。

通常のアンカーへはスルスルっといかなかった

で、あるエントリーの作成中にアンカーをつけてスルスルっとさせたい部分があったので、普通に「href="#移動先のid"」とかして使おうと思ったら、スルスルっと言うよりシュッという感じで瞬間移動したんですねこれが。

でも間違いなくトップに戻る時は効いてるので、コレはちょっと調べてみる必要がありそうだな…というのが今回のテーマの発端となったわけです。それでは今回も微妙に長くなりますがいつも通りな感じでいってみたいと思います。

Simplicityのファイルをわからないなりに調べてみた

とりあえずそれっぽいファイル名を探して順番に追いかけてみる事にします。確かに面倒な作業ではありますが、作者さんはもっと大変だった事を思えばそんな贅沢は言ってられません。

button-go-to-top.php

まず目についたこのファイルを調べてみると、どうやら表示に関係する部分だけのようです。例によって全て左寄せになっちゃってますが、近い内に何か対応策を考えてみたいと思ってますので、当面はこんな感じでご容赦いただきたい。 ※原因がわかったので修正しました。

<?php
//////////////////////////////////
// トップへ戻るボタンのテンプレート
//////////////////////////////////
if ( is_go_to_top_button_visible()  ): //トップへ戻るボタンを表示するか?>
<div id="page-top">
  <?php if ( get_go_to_top_button_image() ): //カスタマイザーでトップへ戻る画像が指定されている時 ?>
    <a id="move-page-top" class="move-page-top-image"><img src="<?php echo get_go_to_top_button_image(); ?>" alt="トップへ戻る"></a>
  <?php else: ?>
    <a id="move-page-top"><span class="fa <?php echo get_go_to_top_button_icon_font(); //Font Awesomeアイコンフォントの取得 ?> fa-2x"></span></a>
  <?php endif ?>
</div>
<?php endif; ?>

ただ、aタグで括ってあるのにhref指定がありません。て事はアレですか?jsでクリックイベントとかそういうのですか?という事で他をあたる事にします。

javascript.js

何となくjsでやってるっぽい事がわかったので、次は適当にこのフェイルを覗いてみると…ビンゴでした。ちょうどこのファイルの先頭にそれらしき記述があります。

/////////////////////////////////
//TOPへ戻るボタン
/////////////////////////////////
(function($){
  var prevScrollTop = -1;
  var $window = $(window);
  $window.scroll(function(){
    //最上部から現在位置までの距離を取得して、変数[scrollTop]に格納
    var scrollTop = $window.scrollTop();
    var threashold = 600;
    var s1 = (prevScrollTop > threashold);
    var s2 = (scrollTop > threashold);

    // スレッショルドを跨いだ時のみ処理をする
    if (s1 ^ s2) {
      if (s2) {
        //[#page-top]をゆっくりフェードインする
        $('#page-top').fadeIn('slow');
      } else {
        //それ以外だったらフェードアウトする
        $('#page-top').fadeOut('slow');
      }
    }

    prevScrollTop = scrollTop;
  });
  //ボタン(id:move-page-top)のクリックイベント
  $('#move-page-top').click(function(){
  //ページトップへ移動する
    $('body,html').animate({
            scrollTop: 1
        }, 800);
  });
})(jQuery);

コメントを見ると最上部から現在位置までの距離を取得してみたり、表示/非表示をフェードで処理してたりして、こういった細かい部分はシンプルどころか作者さんの拘りを感じます。そしてやはりクリックイベントでトップへ移動させていました。

そんなわけでトップ専用でした

トップ専用と言えばザクIですが(毎度わかりにくいネタでスイマセン…)つまりトップへ戻る以外の用途でスルスルさせたいなら、これをカスタマイズするか自分で組み込む必要があるというわけですね?正直コレはカスタマイズきっついなーと思ったので、私は素直にプラグインに頼る事にしました。

せっかくだからjQuery Smooth Scrollを選ぶぜ

というわけで、このjQuery Smooth Scrollをインストールしてみました。設定不要の簡単なプラグインなので、有効化してしまえば後は特に何もしなくてもスルスルさせられます。

トップへ戻るボタンの二重表示に注意

ただ、このプラグインでもトップへ戻るボタンを自動的に表示しているので、二重に表示されないようにするには、Simplicityのボタン表示を無効にするのが手っ取り早いです。実はjQuery Smooth Scrollの方を無効にする方法がわからないだけなんですけどね…

そんなわけで外観 > カスタマイズ > レイアウト(全体・リスト)の下の方にある「トップへ戻るボタンの表示」にチェックが入っていたらこれを外して下さい。ボタン1つと言えども丁寧に作り込んであるのを見てしまうと非常に心苦しいですが、私では他に巧くやれる方法がわからないのでホント申し訳無いという感じです。

飛び先と言うか着地点を調整したい

このプラグインに限った話では無いかもしれませんが、スルスルっと行った先で本来アンカーが設定されている場所から微妙にズレる、と言うかどうも行き過ぎちゃうんですよね。大抵の場合は見出しにアンカーを設定する事が多いのではないかと思いますが、ほぼ確実に飛び先の見出しを通り越して画面上に追いやってしまうので、見出しを見る為にわざわざ少しスクロールを戻して確認する事もあったりして、これはちょっといかんでしょーと思ったわけです。

困った時はFAQを見ましょう

プラグインの編集の中にreadme.txtがあったので、中を開いて読んでみると親切な事に対応方法が書いてありました。英語なんですけどそこはまぁ仕方がないですね。

= Can I adjust the point when the icon/link appears? =
Yes, just edit the upperLimit value in js/jss-script.min.js.

はい、という事でjss-script.min.jsを見てみましょう。

jQuery.noConflict(),jQuery(function(o){var t=100,e=o("a#scroll-to-top"),n=600,a="swing";e.hide(),o(window).scroll(function(){var n=o(document).scrollTop();n>t?o(e).stop().fadeTo(300,1):o(e).stop().fadeTo(300,0)}),o(e).click(function(){return o("html, body").animate({scrollTop:0},n,a),!1}),o('a[href*="#"]:not([href="#"]):not([href^="#tab"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")||location.hostname==this.hostname){var t=o(this.hash);o(".primary-header").height()+5;if(t=t.length?t:o("[name="+this.hash.slice(1)+"]"),t.length)return o("html,body").animate({scrollTop:t.offset().top},n,a),!1}})});

ちょっとでも親切だとか思った私が甘かったです…このページで見ると微妙なところで自動改行されてますが、これ1行で書かれてますからね。jQueryではよくある事なんですが、jsの読み込みを速くする為に、修正する必要の無い部分はこのように圧縮しておいて、実行に関する部分とオプションの設定はヘッダーやフッターに記述するのが一般的な感じかと思います。

それでもプラグイン方式では仕方が無いところでしょうか。このプラグインの場合はこういった設定がダッシュボードから出来ないとかで評価を低くしていた人もいたようですけど…とりあえず落ち着いて内容をひと通り確認してみる事にします。

ソースを読みつつ微妙にアレコレとイジってみたところ何とかなりました。根本的に間違っている可能性は否定できませんが、結果的にどの数字をどうしたら私がやりたいようになったか書いてみたいと思います。

アンカーの少し手前で止まるように調整

パッと見た感じでは最初に出て来るt=100の部分だと思ったんですが…圧縮してない方のjsファイルを見てみると、やはりこの数値が先ほどのreadmeにあったupperLimitのようです。なのにここを変えてみてもさっぱり変わりません…なぜゆえに?

その後ろの数字は違うという事がわかっていたので、こりゃお手上げかなと諦めかけたところビビっと閃いた事を試してみたら巧くいきました。

最初のvarのところで適当な変数に数値を代入しておいて後から引くか、直接その数値を引いてもどちらでもいけましたが、とりあえず当サイトの場合だと見出しのマージンとパディング的に50pxくらい手前でいいかな?という事でこのようにしてみました。jss-script.min.jsの一番後ろの方に以下のような部分があるかと思います。

animate({scrollTop:t.offset().top},n,a)

それをこうしてみます。

animate({scrollTop:t.offset().top-50},n,a)

さすがにブランクを入れた方が良さそうに見えますが、結果的にちゃんと動いていたのでこれはこれで大丈夫なようです。

修正する際の注意点

jsやcssを修正した場合は、一度ブラウザのキャッシュをクリアしてから確認するようにして下さい。そうでないと以前のものをそのまま使用する事があるので、修正したはずなのに直ってない?!という事になります。方法はブラウザによって違いますが、だいたい履歴 > 最近の履歴を消去みたいな項目があるかと思います。

スクロールの速さを調整

本来の目的は果たしましたが、ついでなので他にも簡単に変更出来る部分を見てみる事にしましょう。今度は始めの方になりますが、n=600の部分がスクロールの速さになるので、この数字を増減する事で調整出来ます。数字が小さいほど速く、大きいほどゆっくりになります。私は800くらいにしてみましたが、それでも長いエントリーになるとトップへ戻る時は速過ぎるくらいですね。

移動の際の挙動を変更したい

いわゆるeasing(イージング)というやつです。他の種類も使えそうな感じですが、とりあえずデフォルトのswingとlinearだけ確認してみました。linearは何と言うかエスカレーターのように一定の速度で移動していく感じで、swingはエレベーターのように最初は加速していき、終点に近付くと徐々に減速していく…といった感じでしょうか。

文章だけで説明するとイマイチ伝わりにくいかもしれませんので、こちらのページを参照すると何となくイメージが掴めるかも?

中には何回見ても違いがほとんどわからないのもありますが、動きだけ見てズバっと百発百中当てられる人がいたら本気で弟子入りしたいくらいです、いやマジで。

矢印のアイコンを変更したい

これはjss-style.min.cssで指定しているアイコン画像のファイルを自分がアップロードしたものに差し替えればいいんだろう…と思ったら全然変わらないんですけど?

仕方が無いので一旦ページを開いてどのcssを読み込んでるかHTMLを見てみると、jsは圧縮した方を読み込んでるのに、cssは普通の方を読み込んでるというオチが。どうせなら統一しておいてよーと思いながらも、cssは変更する可能性があるのでそうしたという事にしておきます。

そんなわけで、jss-style.cssの中のarrow.pngを変更したいアイコンファイルに設定すればOKです。あまり大き過ぎてもアレなので32x32程度のpngファイルが良いでしょう。相対パスの書き方に自信が無かったら絶対パスにするか、元のファイルと同じ場所に入れてファイル名だけ変更すると簡単かと思います。ちなみにディレクトリは/jquery-smooth-scroll/imagesになります。

これにはもう1つ方法があってreadme.txtによりますと。

= Can I use a custom icon? =
Yes, just overwrite the arrow.png image or use the included PSD to tweak.

デフォルトのarrow.pngを上書きしろという事ですね。こちらの方法だとcssの修正は不要で、ディレクトリは先ほどと同じ/jquery-smooth-scroll/imagesですので、どちらでも自分のやりやすい方法で対応していただければと思います。

今回の修正内容を確認

さて、今回はjQuery Smooth Scrollをインストールして以下の項目の設定をしてみました。

  • 移動先の終点の微調整
  • スクロールの速さ
  • イージングの種類
  • トップに戻るボタンのアイコン変更

例のjsの変更箇所がちょっとわかりにくかったかもしれませんので、念の為に変更箇所または変更可能ですよと説明した部分だけ太字にしてみましたが、highlighterの色分けのせいで却って見難い気がしなくもないような…

jQuery.noConflict(),jQuery(function(o){var t=100,e=o("a#scroll-to-top"),n=800,a="swing";e.hide(),o(window).scroll(function(){var n=o(document).scrollTop();n>t?o(e).stop().fadeTo(300,1):o(e).stop().fadeTo(300,0)}),o(e).click(function(){return o("html, body").animate({scrollTop:0},n,a),!1}),o('a[href*="#"]:not([href="#"]):not([href^="#tab"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")||location.hostname==this.hostname){var t=o(this.hash);o(".primary-header").height()+5;if(t=t.length?t:o("[name="+this.hash.slice(1)+"]"),t.length)return o("html,body").animate({scrollTop:t.offset().top-50},n,a),!1}})});

動作がちょっとおかしいと思ったら

一応はこれで直ったはずなんですが、それでも実際「アレ?」と思う時があるんですよね。飛び先と全然違う場所で止まっちゃったりして。私が思うに恐らく「Lazy Load」のせいではないかとにらんでいます。検証はまだしていませんが、移動先に向かう途中に画像がある場合に発生する事が多い気がするので、その可能性は多分にあるのではないかと思っています。一応、今回のところは参考までにという事で。

さて、今回も大した内容では無い割に長くなってしまいましたが、単純に答えだけ書いちゃうのもなぁと思いながら色々と書いてるとこんな感じになってしまうんですよね。この辺を巧くまとめられるようにしたいというのが今後の課題でしょうか。

それでは今日はこの辺で、また。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

スポンサーリンク
トップへ戻る