Webの記録

scroller.jsで「するするスクロール」にチャレンジ♪

投稿日:

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

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

サンプルを見る
 

設置方法。

jQueryをダウンロードする。

jsフォルダに「jquery.js」 「scroller.js」を入れておく。

 

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

 

ページ内リンクを設定をします。

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

<div id="head">ページの先頭</div>
<!-- /#head -->
<div id="contents">

<p>このテキストの最後にページ内リンクをはります。</p>

&nbsp;

<a href="#footer">ページの終わりに進む</a>

<a href="#head">ヘッダーへ戻る</a>

</div>
<!-- /#contents -->
<div id="footer">ページの終わり</div>

 
下準備はこれだけ。
あとは、どんな動きになるか・・・だけです。
今回は、前回より移動出来る部分を増やしています♪

-Webの記録
-, ,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

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

関連記事

no image

slideshow.jsを使って画像のスライドショーにチャレンジ。 

この記事は約 1 分で読めます。画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 たくさん方法があると思うので、いくつか試してみるつもりです。 まず今回は、「slid …

no image

苦手なJavaScriptをイチから勉強してみる【イベント編】

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

no image

「WordPress Popular Posts Stats」で人気記事を表示させてみた♪

この記事は約 1 分で読めます。 WordPressのプラグイン「Wordpress Popular Posts Stats」を使って、自分のサイトでよく読まれている人気記事を表示させてみることにしま …

no image

X SERVERにa-blog cmsをインストールしてみた。

この記事は約 1 分で読めます。 先日「「AMPPS」にa-blog cmsのローカル環境を作ってみる」でローカル環境にa-blog cmsをインストールしてみました。 今回、a-blog cmsの勉 …

no image

WordPress プラグイン「Dynamic To Top」で上に戻るボタンを簡単に設置♪

この記事は約 1 分で読めます。 よくいろんなサイトを閲覧していて、ページの下へスクロールしていくと・・・「上に戻る」ボタンを見かけます。 そこで今回は、Wordpressのプラグイン「Dynamic …