Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています（＾＾）　週末はレストランやコンビニのお菓子のことを書いています。

jQueryプラグイン 「するする」とページ内リンクを移動する　smoothScroll.js

jQueryプラグイン

今回は、jQueryプラグインの「smoothScroll.js」について書きます。


「smoothScroll.js」を使うと、ページ内リンクを「するする」と移動できます。
ページ内リンクの移動を一工夫したい人におすすめです。


まず、導入方法について書きます。

①「smoothScroll.js」のダウンロード
こちらよりダウンロードできます↓
ページ内リンクをスマートにするsmoothScroll.js - to-R
f:id:gupuru:20140323221224p:plain

②「smoothScroll.js」の読み込み
「smoothScroll.js」を通常のjavascriptライブラリと同じように読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="smoothScroll.js"></script>

③「smoothScroll.js」を使う
あとは、通常のページ内リンクを使う方法と同じです。

<a href="#footer">移動</a>

			<p>nya</p>
			<p>nya</p>
			<p>nya</p>

<p id="footer">ここまで</p>


これだけで導入できます。
とても簡単です。


次に、サンプルを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQueryプラグイン</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="smoothScroll.js"></script>
</head>
<body>
	<h1>smoothScroll.jsのテスト</h1>
	<a href="#footer" id="header">下に移動</a>

			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>
			<p>nya</p>

<a href="#header" id="footer">上に移動</a>
</body>
</html>

実行結果
f:id:gupuru:20140323222022p:plain


最後に、「するする」と移動させない方法を書きます。

<a href="#header" data-tor-smoothScroll="noSmooth">ふつう</a>

「data-tor-smoothScroll="noSmooth"」とつけると、通常のページ内リンク移動になります。

参考サイト
ページ内リンクをスマートにするsmoothScroll.js - to-R
HTMLタグ/リンクタグ/同じページ内にリンクする - TAG index Webサイト