olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascript、コンテンツを効果的に表現するスクリプトサンプル設置方法

  1. Home>
  2. コンテンツ表示>
  3. ページスクロール>
  4. スムーズにページスクロール

ページスクロールdf_smooth_scroll

スムーズにページスクロール

スポンサードリンク
  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Smooth Scroll - by www.dezinerfolio.com</title>
<style type="text/css">

* {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

div{
	height:250px;
	line-height:250px;
	text-align:center;
}

a{
	color:#000;
	text-decoration:none;
}

</style>
</head>
<body >

<div class="header_link">
<a href="sample.html" target="_blank">サンプルはこちら</a>
</div>

</body>
</html>

アンカーリンクでのページ内移動をスムーズで滑らかな動作でスクロールさせることが出来ます。
スクリプトを読み込ませるだけで動作するので導入も簡単です。 

１．ダウンロード/セッティング

サイトへ行き df_smooth_scroll.zip をダウンロードしてきます。
解凍したら smooth.pack.js をアップロードして下さい。

２．<head>設定

アップロードしたスクリプトを読み込ませます。

<script type="text/javascript" src="smooth.pack.js"></script>　

パスはアップロードした場所に合わせて調節してください。

３．HTMLマークアップ

通常通り、

<a name="top" href="#footer">GO TO FOOTER</a>　

のようにアンカーを設置し、それに対してリンクを記述するだけでOKです。

関連スクリプト

感想

加速度付きでスクロールするのでストレスもないし意識も付いていきやすいのでユーザビリティ的に良いと思います。

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。