ScrollTo with jQuery

• Dec232008
• Vote:
  http://bizcaz.com/archives/2008/12/23-133748.php
• Categories: jQuery
• Tags: jQuery
• Social Bookmark

• Prev Page: Captify with jQuery
• Next Page: Scrollable with jQuery

こんにちわ^^

以前、jQuery の interface.js を使ったスムーススクロールをご紹介したことがあります。

• jQueryでスムーススクロール

スムーススクロールには ScrollTo プラグインってのもあります。

• ScrollTo プラグイン

でもいろいろ思うとこありまして、プラグインを使わずに jQuery のデフォルト機能を使って、もっとお手軽にスムーススクロールを実装する方法のご紹介です。

今回はサンプルは用意してないのですが、わたしのサイトのタグ検索などをやってみてもらえれば分かると思います。
そんなかんじのものが作れます。

カンタンに説明すると、任意のエレメントまでスクロール後、任意のファンクション実行を可能とするものです。
しかも jQuery 標準で備わってる animate エフェクトを使ってるだけです。

ダウンロード

以下から ScrollTo プラグインをダウンロードできます。

• jquery.scrollto.zip

大したことやってないのですが、良かったら使ってみてください。
一応わたしのサイトでも使ってるものを切り出したプラグインなので Firefox、Safari、Opera、Google Chrome、IE で確認済みです。

• 参考:JQuery 1.2 Roadmap

使い方

1. 単純にスクロールさせたいだけなら以下のように使います。

   スムーススクロール

   1. $('#top').ScrollTo(1200);

   青字の部分でスクロール先をセレクタに指定します。
   赤字はスクロールのスピードをミリ秒で指定します。'slow' や 'fast'、'normal' と指定しても問題ありません。 基本的には jQuery の animate エフェクトですから (●´∀｀●)

   • Effects/animate - jQuery JavaScript Library

2. スクロール完了後に何らかの処理をさせたい場合には以下のように使います。たとえば、わたしのサイトのような、スクロール後 Ajax を使ってタグ検索したり、ページ移動したりなど。

   スムーススクロール後コールバック

   1. $('#top').ScrollTo(1200, function() {
   2.     alert('callback complete');
   3. });

   緑字のようにスクロール後、処理させたいファンクションを上記のように記述して、alert のような、各自の目的の処理をさせることができます。
   出回ってる ScrollTo プラグインではこれができなかったので自作しました。[2008.12.23] ScrollTo プラグインのコードを解析したら、コールバックってできるみたいね。今初めて知ったよ (;￣∇￣A

以上です。カンタンですね (￣∇￣)b

• Related Entries
• 09/12/06ブラウザスクロールに連動するサイドバー
• 09/11/29かんたんスターレーティング( jquery.sexyvote.js )
• 09/11/27TopUp
• 09/05/18リファラ・ランキング・プラグイン（jquery.pagerank.js）
• 09/03/16すべてのブログのアクセスランキングを表示する（jquery.pagerank.js）
• 09/03/15ローテーションするアクセスランキング（jquery.pagerank.js）
• 09/01/24Updated Today with jQuery
• 09/01/20LazyDocWrite with jQuery
• 09/01/17jQuery 1.3.0 リリース
• 09/01/03Sparklines with jQuery

• Edit
• Permalink
• 2 Comments
• No TrackBacks