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

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

jquery.nivo.slider.jsを使ってリッチなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。今回も数枚の画像を使ったスライドショーを作りたいと思います。 見た目がキレイで、ユーザーが自由に前後の画像へ移動する事も出来て、ちょっとしたテキストも入れられるという・ …

no image

WordPressテーマエディタをプラグイン「Advanced Code Editor」で見やすく♪

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作成する時、WordPressのテーマ編集画面のエディタを使用しているのですが・・・ちょっと見辛いなぁと思っていました。 今回何 …

no image

WordPressでオリジナルテーマ作りにチャレンジ6【single.php編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りにチャレンジしています。 今のところ、「index.php」「header.php」「sidebar.php」「footer. …

no image

フッターをブラウザの下部に固定する方法

この記事は約 1 分で読めます。 コンテンツが少ない場合、フッターの下に余白が出来てしまいます。 さすがに、ちょっと気になる・・・ってワケで、今回はフッターをブラウザの下部に固定する方法をいろいろ試し …

no image

WordPressサイト内検索でのキーワードが分かるプラグライン「Search Meter」を試してみた。

この記事は約 1 分で読めます。 アクセス解析をしていると、どんなキーワードで検索されたのか?を知ることができます。 しかし、キーワードを入力して検索できなかった結果を知る事はなかなか知る事ができない …