ページトップに戻りたい!スムーズにページ内スクロールするJavaScript

jQueryを使ってページ内をスムーズにスクロールするJavaScriptのサンプル記事がとても有益だったのでシェアさせて頂きます。

引用元:jQueryでスムーススクロール [Cool Web Window]

$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400;// ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});

元記事に詳しい解説が書かれていますので、ぜひ閲覧してみてください。
jQueryでスムーススクロール [Cool Web Window]

[jQuery]コンテンツをふわっとフェードインさせる。

ページ読み込みが完了した後、指定した要素(サンプルではli要素)を時間差で順番にフェードインするスクリプトを作ってみました。

<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
 
$(function(){
  
    //フェードインさせる要素をいったん非表示にする
    $('li').css('display','none');

    });

$(function(){

    var $cont = $('li');

    //全てのページコンテンツを読み込んだ後に、function内の処理を実行
    $(window).load(function(){

        //ローディング画像をHTMLから削除する
        $('.loading').remove();

        //contの数だけループ
        for(var i = 0; i < $cont.length; i++){

        //contのi番目を、0.5×i秒後に、フェードインさせる
        $cont.eq(i).delay(500 * i).fadeIn();
        };

    });

});
</head>
<body>
<p class="loading"><img src="loadinfo.net.gif" alt="" /></p>

<ul>
	<li><img src="01.jpg" alt="" width="200" height="150" /></li>
	<li><img src="02.jpg" alt="" width="200" height="150" /></li>
	<li><img src="03.jpg" alt="" width="200" height="150" /></li>
	<li><img src="04.jpg" alt="" width="200" height="150" /></li>
</ul>
</body>

demo

ローディング画像をページのデータをロード後に削除し、その後li要素をfadeIn()でふわっとフェードインさせます。for文を使ってひとつずつタイミングをずらして次々にフェードインしていきます。

以下のサイト記事を参考にさせて頂きました。

jQueryでページ遷移時にフェードインフェードアウトの効果をつける (wald-grun/blog)
ソースコピーで簡単に使えるCSS3とjQueryで作るローディングページ作りました | HTML5でサイトをつくろう

[jQuery]背景画像の位置を変更して表現するロールオーバーを作ってみました。

サイトのメニューにマウスをのせることによって見た目が変わるロールオーバー。実現したいビジュアルや、ブラウザの条件、使える技術などにより作り方がいろいろと変わってくると思いますが、今回は背景画像を上下にずらして見た目を変える方法を採用しました。以下がコードになります。

$(function(){
    $(".menu-item").mouseover(function(){
        $(this).css("backgroundPosition","0 -20px")
    }).mouseout(function(){
        $(this).css("backgroundPosition","0 0");
    })
});

.menu-itemというclass名を付けたli要素に高さと幅を指定して、以下のロールオーバー前と後を上下にくっつけた画像を背景に設置します。

header-navi-about

ロールオーバー時には背景画像のポジションを上に20pxずらし、マウスが離れたら元に戻す、ということをjQueryを使ってCSSを書き換えることによって実現しています。教科書どおりです。

WordPressでカスタムメニューを使ってナビメニューを設定するとli要素としてテキストと一緒に出力されるので、テキストを画像置換してロールオーバーを作っています。

最初は画像のパスをjQuwryで書き換えるスクリプトを作ろうと思ったのですが上手くいきませんでした。WordPressで外部JavaScriptを使った場合、CSSで画像URLのパスを書き換えたり出力したりするのが難しい。ゆくゆく調べようと思います。

WordPressでjQueryを使うときの手順まとめ。wp_enqueue_script()とwp_head()

WordPressでjQueryを設置するための手順を忘れないようにまとめておきます。

jQueryの設置の仕方はいくつか選択肢がある

  • jQueryを公式サイトよりダウンロードして任意のディリクトリに設置する。
  • WordPressに組み込まれているjQueryを使う。
  • Google AJAX Libraries API内のjQueryを使う。

(1)
WordPressなどCMSを使わない静的なサイトではjquery.jsをダウンロードして以下のようにhead要素に書いて設置します。

<script src="/任意のディリクトリ/jquery.js"></script>

(2)
しかし、WordPressはあらかじめ内部にjQueryが組み込まれています。下記のようにhead要素に記述すれば、簡単に呼びだすことができます。jquery.jsを公式サイトからダウンロードする必要はありません。…のはずなんですが…

<?php wp_enqueue_script('jquery'); ?>

(3)
実際には問題が発生してプラグインやJavaScriptが動作しない場合があるようです。自分の環境でもjQueryがうまく動きませんでした。詳しくはこちらのエントリーが参考になります。
別の手段としてGoogle AJAX Libraries API内のjQueryを使う方法をやってみます。

<?php wp_deregister_script('jquery'); wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', array(), '1.7.2'); ?>

これに切り替えたところ、自前で書いたスクリプトがうまく動作してくれました。(※自分でjquery.jsを設置しても大丈夫だったかもしれませんが未検証です。)jQueryの設置はこれで大丈夫のようです。

※wp_enqueue_script()というテンプレートタグを使っておりますが、これはjQueryや自作jsファイル、プラグインを使う場合などに誤動作が起きないようサポートしてくれる仕組みのようです。これについては別にエントリーを書きたいと思います。

wp_head()を忘れずに

最後にの直前にwp_head()を記述します。これを書いたところに先ほどのwp_enqueue_script()を使って書いた内容が出力されます。

<head>
…
…
<?php wp_head(); ?>
</head>

まとめ:どの設置方法がベスト?

ダウンロードして設置する手間ひまや、jQueryのバージョン管理を考えるとGoogleを使うのが自分的にはベストのような気がします。(※jQueryのバージョンアップに自動的に対応するurlの書き方があるようです)環境によってベストなやり方を選択しましょう。

※以下のエントリーを参考にさせていただきました。ありがとうございました。

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net