JavaScript で簡単にスムーズスクロールさせるライブラリ tm-scroller.js を作ってみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

JavaScript で簡単にスムーズスクロールさせるライブラリ tm-scroller.js を作ってみました.

簡単に導入できるのでよかったら使ってみてください. デモもいくつか用意しています.

thumb

Demo

今回制作した『TM Scroller』のデモです. リンクをクリックするとスムーズに画面がスクロールします.

Demo

Download

Description

画面内のスクロールをスムーズにするライブラリです. ライブラリを読み込んで, 一つ関数を実行するだけで画面内リンク移動がスムーズになります.

URL のアンカー部分にも対応しています. なので, スクロール終了後にちゃんと #以降が変化するのがわかるかと思います.

他のライブラリとの競合をしないように作ってあるのでぜひ使ってみてください.

Usage

使い方は

  • tm-scroller.js を script タグとして読み込む
  • 通常のアンカーと同じように, a タグの href 属性に 飛び先への ID を登録
  • window.onload 時に tm.Scroller.setup(); を実行

という流れになります.

下記のコードは使用例です.

<!DOCTYPE html>
<html>
    <head>
        <meta charset=UTF-8>
        <title>Example</title>
        <style>
            .box {
                margin: 20px;
                width: 640px;
                height: 2000px;
                border: 1px solid black;
            }
        </style>
        <script type="text/javascript" src="../tm.scroller.js"></script>
        <script>
            window.onload = function()
            {
                tm.Scroller.setup();
            };
        </script>
    </head>
    <body>
        <header>
            <h1 id="top">Example</h1>
            <a href="#bot" class="tm-scroller">Foot of page</a>
        </header>
        
        <section class="box"></section>
        
        <footer>
            <h1 id="bot"></h1>
            <a href="#top" class="tm-scroller scroll-time:2000">Top of page</a>
        </footer>
    </body>
</html>

次はベジェ曲線について書こうと思います.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT