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

WebサイトのURLを変更した後 .htaccessの記述して新しいURLに転送してみる

この記事は約 2 分で読めます。 ずっと運営していたサイトのURLを都合により変更(ファイルを移動)させてしまった時、ブックマークから訪問してくれた人が困らないように新しいURLへ転送する事が必要にな …

no image

WordPressのオベンキョウ②

今日は、プラグインを準備してみました。

no image

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

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

no image

画像最適化に便利な4つのツール

この記事は約 1 分で読めます。スマホを意識したWebページを作っていると、避けて通れない「画像最適化」。 昨年あたりから少しずつ使っていますが、見た目は変わらないのに軽量になるから不思議です! 私が …

no image

ナビゲーションボタンのコーディングについて考えてみた

この記事は約 1 分で読めます。 ナビゲーションボタンのコーディングをする時に、どんな風にコーディングしていますか? 対応するブラウザとかによっても変わると思うのですが・・・。 今回、ちょっとナビゲー …