data属性を使ったjQueryスムーズスクロール

jQueryでスムーズスクロールを実装した際、タブ切り替えやらアコーディオンやらとバッティングすることがあって困ったことが何度かあリました。
Google先生に聞くと「特定文字列を除外」とか「classを追加」で対応していることが多かったのですが、無関係な部分に余計な記述をしたくない。

だったらdata属性使えばいいじゃない。

デモ

実装

一般的なアンカーリンクにdata-scroll属性を追加（<a href="#hoge" data-scroll>hoge</a>）することでスムーズスクロール付きアンカーリンクになります。

ページトップへスクロールさせる場合は href="#page_top" に設定します。
bodyなどに#page_topを入れる必要はありません。

javascript

// スムーズスクロール
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
$(function(){
  $('[data-scroll]').on('click', function() {
    var speed   = 500,
        $self   = $(this),
        $href   = $self.attr('href'),
        $margin = $self.attr('data-scroll') ? parseInt($self.attr('data-scroll')) : 0,
        $target = $($href);
    var pos = ( $target[0] && $target !== '#page_top' ) ? $target.offset().top - $margin : 0;
    $('html,body').animate({scrollTop: pos}, speed, 'swing');
    $self.blur();
    return false;
  });// end function.onClick
});// end function

html

<!-- #mainにスムーズスクロール -->
<a href="#main" data-scroll>メインコンテンツ</a>

<!-- ここにスクロール -->
<div id="main">メインコンテンツ</div>


<!-- ページトップにスムーズスクロール -->
<a href="#page_top" data-scroll>ページトップへ</a>


<!-- 通常アンカー、スムーズスクロールなし -->
<a href="#anchor">アンカーリンク</a>

オプション

data-scrollに数値を入れることで、スクロール位置の調整ができます。

<!-- #subから15px手前にスムーズスクロール -->
<a href="#sub" data-scroll="15">サブコンテンツ</a>

<!-- ここから15px手前にスクロール -->
<div id="sub">サブコンテンツ</div>

まとめ

まとめもクソもないけど、位置調整できるのは自分的になかなかナイスでした。
あとQiita初投稿です。
これからぼちぼちやっていけたらいいなぁと思います。