Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

デモ

http://yuking11.github.io/jq-smooth-scroll/

実装

一般的なアンカーリンクに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初投稿です。
これからぼちぼちやっていけたらいいなぁと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした