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

日本語文章校正ツールを使ってみた。

この記事は約 1 分で読めます。 今回は、Yahoo!Japan校正支援Webサービスを利用した校正支援ツールを試してみました。 誰かに伝える文章を書く時に使えそうな、Webツール「日本語文章校正ツー …

no image

Facebook向けに最適なOGP設定の仕方をメモ。

この記事は約 1 分で読めます。 何かのサイトで「いいね!」をした時に、友達のニュースフィードに確実に出したいなら・・・OGPの設定が必要! ・・・と、いうワケで最近はサイトを作ったら「OGP設定」を …

no image

WordPressプラグイン「WP-Copyright-Protection」で右クリック・ドラック禁止でコピーガード

この記事は約 1 分で読めます。 以前、「右クリック禁止で画像のコピーガード」など、画像のお持ち帰りを禁止したい措置について記事を書きました。 3年ほど前の記事にもかかわらず、今も毎日閲覧数が多いです …

no image

MAMPでMySQLが起動しない時

この記事は約 1 分で読めます。 MAMPを起動した時、Apacheはちゃんと起動されているのにMySQLが起動しないことがあります。 いろいろな原因はありそうですが、とりあえず調べた内容でなんとか無 …

no image

baserCMSでログインできなかった時に試したこと

この記事は約 1 分で読めます。 baserCMS初心者なので、まだいろいろと分からないことだらけです。。。 インストールして、数日ログインしてなかったら・・・何故かログインできなくて困ったので、試し …