<< 画像をポップアップ表示するjQuery | main | 自動でスライドショーをするiViewというjQuery >>

なめらかにスクロールするjQuery

2013.08.15 Thursday | by こも
上下になめらかにスクロールするSmoothScrollというjQueryを使ってみました。

SmoothScrollは日本の人が作ったようで、公式サイトには日本語の導入方法が記載されてます。

jQuery.smoothScroll.jsをダウンロードして使うみたいです。




動作確認用に「top」「middle」「bottom」の3か所にネームをつけて、アンカーテキストをクリックするとそちらにスクロールするサンプルプログラムを書いてみました。

※スクロールしている様子が確認できるように高さ1000ピクセルのダミーエリアを作っています。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SmoothScroll Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smoothScroll.js"></script>

<style type="text/css">
<!--
.dummy1 {
	width:450px;
	height:1000px; 
	background-color:#F99;
}
.dummy2 {
	width:450px;
	height:1000px; 
	background-color:#99F;
}
-->
</style>

</head>

<body>


<div id="top">
	<p>
		<a href="#top">トップ</a>
		<a href="#middle">ミドル</a>
		<a href="#bottom">ボトム</a>
	</p>
</div>

<div class="dummy1">
	<p>ダミーエリア</p>
</div>

<div id="middle">
	<p>
		<a href="#top">トップ</a>
		<a href="#middle">ミドル</a>
		<a href="#bottom">ボトム</a>
	</p>
</div>

<div class="dummy2">
	<p>ダミーエリア</p>
</div>

<div id="bottom">
	<p>
		<a href="#top">トップ</a>
		<a href="#middle">ミドル</a>
		<a href="#bottom">ボトム</a>
	</p>
</div>

</body>
</html>


こちらも割と簡単に組み込めて便利な感じです。

ちなみに設置サンプルはこちらにおいています。

Comment
Add Comment









Sponsored Link
Recommend
PHP 逆引きレシピ (PROGRAMMER'S RECiPE)
PHP 逆引きレシピ (PROGRAMMER'S RECiPE) (JUGEMレビュー »)
鈴木 憲治,安藤 建一,山田 直明,八木 照朗,山本 義之,河合 勝彦
Recommend
Recommend
Powered
無料ブログ作成サービス JUGEM