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

苦手なJavaScriptをイチから勉強してみる【基本準備編】

この記事は約 1 分で読めます。今更なんですが、実はJavaScriptはちょっと苦手です。。。 jQueryのライブラリーを使って、部分的にいじる事はあっても・・・何となく「JavaScript」っ …

no image

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

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

no image

レスポンシブ対応ナビゲーションを簡単に付けられる「SlickNav」

この記事は約 1 分で読めます。 レスポンシブサイトで、PCとスマホではメニューの見せ方を変えたいもの。 画面の幅が狭くなった時はハンバーガーボタンと言われる三本線のボタンを表示をすることができる、j …

no image

Facebookページに「お問い合せフォーム」を簡単設置♪

この記事は約 2 分で読めます。何気に始めたFacebookでは意外な人との繋がりが持てて、思ったより面白くて毎日開いて見てしまいます。 きっとそんな風に思っている方も多いのでしょう。 最近、Face …

no image

WordPressでRSSフィードを便利に使うプラグイン。

この記事は約 1 分で読めます。 以前、「WordPressサイトでRSSフィードボタンを設置してみた♪」でRSSフィードボタンを設置しました。 その後、RSSフィード関係で便利そうなWordpres …