ページトップへスムースにスクロールさせる方法 - WordPress（ワードプレス）でブログアフィリエイト

RSSの登録はコチラ！

jQuery

| WEBデザイン |

ページトップへスムースにスクロールさせる方法

サイトの下部からページトップに戻るとき、スムーズにスルスルって戻るサイトが良くありますね。その機能を実装してみたいと思います。

やはり、サイトの動きを色々つけようとしたらCSSだけでなく、手軽に実装できるJavaScriptライブラリ「jQuery」が便利です。

jQueryには多くのプラグインがありますが、プラグインがなくってもかなりのことがコピペで実装できます。

今回は一番簡単にスムーズスクロールを設置出来る方法を紹介します。

jQueryでスムーズスクロール

通常、jQueryに行ってダウンロードし、サイトにjsフォルダを作り、その中にjquery.jsファイルを作り・・・・ってすすめるんですが、簡単に設置するには「Google Libraries API」を利用します。

「Google Libraries API」はGoogleがホスティングしているJavaScriptライブラリで、jQueryもあります。

１、まずやるのは、head内に

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
"></script>

をコピペし、 scriptタグでjQueryを読み込みます。読み込むといっても貼っておけば大丈夫です。

２、次にその下に

<script type="text/javascript" src="js/hogehoge.js"></script>

を貼り付けます。サイトのソースがごちゃごちゃしたくないので、外部ファイルにします。「hogehoge」はなんでもいいのでわかりやすい名前をつけてください。

head内はこの2行だけです。

３、次にメモ帳やterapadなどのテキストエディタで新規ページを開き、以下をコピペします。

$(function(){
     $("#toTop a").click(function(){
     $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
     return false;
     })
});

これを【hogehoge.js】で保存。

４、サイト内の階層に新規フォルダで名前が「js」。その中に【hogehoge.js】を入れます。

左図のような感じです。

５、最後にリンクを置きたいところに、

<p id="toTop"><a href="#head">ページトップへ</a>

を書いて終わりです。

リンク先の#headは、IDで指定するので、戻りたいところのIDがheadとかwrapperとか変えて指定してください。

 

以上ですが、ヘッド内に2行コピペし、コピペで「hogehoge.js」ファイルを作っただけです。

こんな簡単にスムーススクロールを実装できるJavaScriptライブラリ「jQuery」はやっぱりすごい。

No related posts.

タグ:

　

マネパ