スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Category:スポンサー広告--.--.--(--)

【jQuery】ページトップへの自動スクロール

以前Javascriptでページトップへの自動スクロールを紹介しましたが
今回はjQueryを使ったものを紹介します!
…といってもいろんなサイトさんで既に紹介されてると思うので
二番煎じならぬ百番煎じぐらいかと思います(´ω`;)
まぁ、自分のメモな感じで書くのでそのあたりは気にしないでください←

1. まずjQuery本家からjQueryをダウンロードします。
  これがないとjQueryは動かないですからね!

2. ダウンロードしたjQueryを<head>~</head>の間に下記のように書きます。
<script src="jquery.js" type="text/javascript"></script>
 【補足】
  ダウンロードしたjQueryファイルの名前は好きに変えたら良いと思います。
  今回は分かり易く「jquery.js」にしてあります。

3. 次にページトップへの自動スクロールするためのコードを書きます。
  これも<head>~</head>の間に書きましょう。
<script type="text/javascript">
$(function(){
$("#toTop a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})
});
</script>

4. 最後に「ページトップへ」のボタンリンクを設置します。
<div id="toTop"><a href="#wrapper">ページトップへ</a></div>

これできっとページトップへの自動スクロールが完成していると思います、よ!!

» サンプルページ

応用としては、例えば
<div id="sample">ここはサンプル部分だよ</div>
と、指定した場所に自動スクロールしたいときには、
「4.」で設置したリンクの「href="#wrapper"」部分を変更して
<div id="toTop"><a href="#sample">サンプル部分へ移動</a></div>
と記述してください。

» サンプルページ

TAG: Web jQuery
Theme:webサイト作成Genre:コンピュータTB:0CM:0Category:jQuery2011.05.02(Mon)

Trackback & Comment


Trackback



Comment

Private

 


ページトップへ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。