Webの記録

「ページ内リンクはするするスクロール」にチャレンジ!!

投稿日:

この記事は約 2 分で読めます。

あっという間に桜も散って、4月も後半!!かなり早いです~!!

今日は・・・、「ページ内リンク」でちょっとイイカンジにスクロールするjQueryにチャレンジです。
ページ内リンクをそのまましても(javaScriptなし)出来ますが、そのままだといきなり戻り先に到着してしまってびっくりするので、「yuga.js」でするするという動きをつけてみました。

※サンプルを見る時、画面が大きいとスクロールする必要がなくなってしまうので、大きなディスプレイの方は画面を小さくしてスクロールするようにしてから見てください。
サンプルを見る

まず下準備・・・です。

ページ内リンクを設定をします。
a href=”○○”で、○○の飛ばし先を、「#」+「ページ先頭の戻りたい部分のid名」で記述。(今回は、#headに戻るので○○は#headとしました)

<a href="#head">ページの先頭に戻る</a>

 

jQueryをダウンロードする。
今回、yuga.jsというライブラリを使ってみましたましたので、「yuga.js」のサイトからダウンロード。
自分が使うフォルダーの中に、「jquery.js」「yuga.js」 を入れる。

 

headerの中に記述。
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/yuga.js" type="text/javascript"></script>

 

下準備はこれだけ。
あとは・・・・どんな動きになるか、試してみるだけです。
参考サイト:http://www.kyosuke.jp/yugajs/

-Webの記録
-, ,

執筆者:


  1. […] 以前、yuga.jsを使ってページ内リンクを「するするスクロール」にチャレンジしました。 今回は、scroller.jsを使って同じような事をやってみたいと思います。 […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPressでオリジナルテーマ作りにチャレンジ3【header・footer編】

この記事は約 2 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 手順を数回に分けてメモしています。今回はその3回目です。 前回は、コーディングしたものを貼り付けた「i …

no image

DreamweaverCS4にHTML5+CSS3のコードヒント・ドキュメントタイプを!

この記事は約 1 分で読めます。 コーディングの時に主に「Dreamweaver」を使用しています。バージョンは、CS4とCS5。 HTML5をぼちぼち・・・なところで、CS5は最初から「HTML5」 …

no image

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …

no image

s3Slider.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。今回も、画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 今回チャレンジしてみたのは、「s3Slider.js」を使ったFlashのよ …

ファイルアップロード・メール添付機能をWordPressお問い合わせプラグイン「Contact Form 7」でカンタン実現!

この記事は約 1 分で読めます。 WordPressでお問い合わせフォームを付けるときは、いつもプラグイン「Contact Form 7」を利用しています。 日本人の作者で、利用者が多く、更新頻度の高 …