2010/05/17HTMLのみでページ内リンクを作成する場合、通常、以下のようにコーディングしますね。href="#top">ページTOPへ</a>「ページTOPへ」をクリックすると、nameとidに「top」を設定している箇所にスクロールします。nameとidの2つを設定しているのはクロスブラウザ対策です。この時、スクロールといっても、ブラウザの縦スクロールバーが表示されている場合に、そこに瞬時にジャンプするだけです。ページが縦に長い場合に、瞬時に移動してしまうと、画面が急に差し変わるので、他のページに遷移したと錯覚を起こす場合もあるようです。単純に見栄えが良いということで、最近ではJavaScriptを利用してスムーズなスクロールを実装するサイトを多く見かけます。そこで今回はjQueryを利用した実装のサンプルです。プラグイン「ScrollTo」を使います。ScrollTo私の場合だと、jquery1.3系で各種ブラウザで動作確認できました。/>$('#btn').click(function(){$.scrollTo($("#top"));});idが「btn」の要素をクリックすると、idが「top」の要素にスムーズにスクロールするサンプルです。jQueryベースなので、要素の指定の仕方は、通常のページ内リンクに比べて、サイト構成に応じた自由度が高いといえます。本書は、実践で即役立つテクニックと開発ノウハウ、つまづきやすい・ハマりやすいポイントを徹底解説した「JavaScriptを利用するWebプログラマ必携の逆引き集」です。JavaScript(ECMAScript)の基本構文や新記法といった基礎的な知識から、オブジェクト指向、組み込みオブジェクト、関数、オブジェクト指向構文、DOM、ブラウザーオブジェクトなどの定石・応用テクニック、開発に役立つツール類まで、著者の経験に基づいた実践の場で必ず役立つノウハウ、レシピを提供します。JavaScriptをいまいち使いこなせていないと感じる方や中級レベルに向けてしっかり足場固めをしたい方、JavaScriptをもっと活用したい方などにおすすめの一冊です。アスキー・メディアワークスWeb制作に必要なjQueryの使い方を効率よくしっかり学べる。2.0など最新のトレンドにも対応。サンプルを100本超提供。1.9対応特製チートシート付き。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。