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

パンくずリストをGoogleの検索結果ページで表示させる方法

この記事は約 1 分で読めます。 Googleで検索をした時に、検索結果でサイトタイトルの下にパンくずリストが表示されているのを見かけたことはありませんか? 最近妙に気になって・・・(今頃?!)、私も …

no image

苦手なJavaScriptをイチから勉強してみる【関数編】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【イベント編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

no image

WordPress 「この記事は●分で読めます」をプラグインなしで表示させたい時

この記事は約 1 分で読めます。 よく他の方のブログで記事の冒頭に「この記事は●分で読めます」という表示がされているのを見かけます。 これがあると、その記事を読むかブックマークするかを判断出来て便利だ …

no image

透明画像を置いて画像をコピーガードする。

この記事は約 2 分で読めます。 今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。 まずは、デモ画面を見て頂きましょうか・・・。 【2016.6.2】一部 …

no image

軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。

この記事は約 1 分で読めます。 今までいくつかのjQueryスライダーライブラリを利用しました。今回も軽量で簡単に設置が出来る「FlexSlider」を見つけたので、早速メモです。 スマートフォンで …