指定できるオプションダウンロードnpmの場合bowerの場合まとめ世の中にある多くのWebサイトで見かける「スムーズスクロール」ですが、なかなか「これだ!」というプラグインが無かったので自作してみました。プラグインを作った経緯この手のプラグインは既に沢山リリースされているため、どれを使うか選び放題です。使ってみると動的に追加した要素に対して有効じゃなかったり、一時的に動作を止めたり、ちょっと複雑に使おうとするとなんだかなぁ〜というのがあったので自分で作ってみることにしました。最近はスマホサイトでjQueryではなくZeptoを導入するケースがあるので、さりげなくZeptoにも対応してみました。どちらでも同じプラグインを共有出来るのがメリットかなぁと思います。任意のタイミングでアニメーション可能ページの初期表示でハッシュの位置にスクロールできるdata属性を使ってパラメータを指定できる一時的に無効化/有効化できるvelocityがインストールされている場合は、アニメーションにvelocityを使うスクロール中にマウスホイールを動かすとアニメーションを止める最近お気に入りだったvelocity.jsを使ったアニメーションにも対応しています。気持ち程度にスクロールがスムーズになるかと思います。ちなみvelocity.jsはにQiitaの下記エントリで初めて知りました。Qiita使い方デモページのDownloadボタンからファイルをダウンロードしておきます。ダウンロードしたファイルをHTMLに読み込んで、任意の要素にsweetScroll()を実行します。$("a[href^='#']").sweetScroll();});</script>基本的にはこれだけで、href属性が#で始まるリンクに対してプラグインが有効になります。指定できるオプション指定できるオプションとそのデフォルト値の一覧です。//スクロールがキャンセルされた時に実行});ダウンロードデモページかGithubからダウンロード出来ます。今のところnpmとbowerにも登録していますので、それぞれ下記でインストールできます。jquery-sweet-scrollまとめあと他にも使える機能があったり、実装についてなど書いておきたいことがあるのですが、それはまた今度書こうと思います。作り終わったのでご紹介ということで...。この記事のコメントメールアドレスが公開されることはありません。お気軽にコメントどうぞ。コメントをキャンセル渋谷でWebサイトを作っています。ちなみに、「ダッケル」はドイツ語でダックスフンドの事だそうです。