Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
22
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@yuking11

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初投稿です。
これからぼちぼちやっていけたらいいなぁと思います。

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
22
Help us understand the problem. What is going on with this article?