スムーススクロールSmooth Scroll

ページ内リンクや「ページトップへ戻る」リンク・ボタンなどでスクロールする際に、スムーズにスクロールするライブラリです。

サンプル

ライブラリのダウンロードと設置

「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード

ダウンロードしたjquery.smoothscroll.jsを任意の場所へ置き読み込みます。
（jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。）

<script type="text/javascript" src="jquery.smoothscroll.js"></script>

オブジェクトの生成と表示

設定したい要素を指定し実行します。

JavaScript

$(function() { $('.sample').on('click', function() { $($(this).attr('href')).smoothScroll(); return false; }); });

HTML

<div id="wrap"> ... <p><a href="#wrap" class="sample">上へ</a></p> </div>

オプション

以下のオプションが設定可能です。

オプション	初期値	説明
animation	true	アニメーションの有無 設定可能な値：true = 有効、false = 無効
easing	'linear'	イージングの種類
duration	500	スクロール速度
addPosition	0	追加位置

$(function() { $('.sample').on('click', function() { $($(this).attr('href')).smoothScroll({ easing : 'easeOutCubic', duration : 600 }); return false; }); });