CoolWebWindow

自作したjQueryプラグインを無料配布しているサイトです。
jQueryプラグインは商用利用可能、MITライセンス表示、カスタマイズ無制限です。

無料jQueryプラグイン [スムーススクロール]

単体バージョン:jquery.smoothscroll.js

ページのトップへ戻りたい場合は、リンク先を『#』としてください。ページ内リンクの場合は、通常通りの設定でOKです。

その際、bodyにはCSSにてmargin-topを0にするようにしてください。そうしないと、ページのトップがそのマージン分空いてしまいます。

jQueryプラグインの呼び出しは下記のHTMLソースコードの10~17行目になります。特定のアンカーだけにスムーズスクロールを実装することも可能ですが、全てのアンカーをスムーズスクロールさせたい場合は、セレクタ部分の設定には『html』か『body』を指定してください。

移動するスピード(何秒かけて移動するか)と移動パターンを選ぶことができます。移動パターンについては、『linear』と『swing』からお選びください。また、jQuery Easing Pluginを利用することにより、さらに多くの移動パターンを選択できるようになります。

スクロール位置を微調整できる『margintop』というオプションを用意しています。例えば、見出しに内部リンクした際、ページ上部ぎりぎりに見出しがきてしまい、読みづらくなってしまう場合があります。余白を設けたいときにこのオプションをご利用ください。

ヘッダーやグローバルメニューが固定されているようなデザインの場合、固定部分の高さを自動的に取得して、スムーズスクロールした際にコンテンツが被らないように調整できます。固定しているセレクタをjQuery記法で指定します。例えば、<div id="header">~</div">が固定されている部分だとしたら、『$('#header')』と記述します。

easingスライドする効果の種類(移動パターン)を選べます。移動パターンについては、「'linear'」と「'swing'」からお選びください。また、jQuery Easing Pluginを利用することにより、さらに多くの移動パターンを選択できるようになります。初期値は「'linear'」です。
speedスムーズスクロールするスピードです。単位はミリ秒ですが、単位まで記述する必要はありません。
margintopページ上部からのマージンを指定できます。
headerfixヘッダーが固定されている場合、ヘッダー分の余白を自動的に取得して、ヘッダーにコンテンツ部分がかからないようにします。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スムーススクロール</title>
<link rel="stylesheet" href="css/style.css" media="all">
<script src="js/jquery.js"></script>
<script src="js/jquery.smoothscroll.js"></script>
<script>
$(function($) {
    $('html').smoothscroll({
        easing :'swing',
        speed :2000,
        margintop :10,
        headerfix : $('header')
    });
});
</script>
</head>
<body>
<header>ヘッダー固定</header>
<div class="contents">
    <p><a href="#link">リンク先へ</a></p>
    <p>
    ↓<br>
    (略)
    ↓<br>
    </p>
    <p id="link">リンク元です。</p>
    <p>
    ↓<br>
    (略)
    ↓<br>
    <p><a href="#">ページのトップへ戻る</a></p>
    </p>
</div>
</body>
</html>

CSS

特に必須の指定はありません。

更新履歴

2015-12-28
ver1.2公開 一部ソースコードを修正しました。
2015-10-01
ver1.1公開 一部ソースコードを修正しました。
2015-02-22
ver1.0公開
ページのトップへ戻る