LoginSignup
0

More than 5 years have passed since last update.

[ jQuery ] onClickでページ内スクロール

Last updated at Posted at 2016-09-12
page_scroll.js
$(function () {
        // hrefがハッシュ(#)から始まる<a>要素をクリックした時
    $('a[href^="#"]').on('click', function () {
        var _href = $(this).attr('href');
        if (_href.replace('#', '') === '') {
            // hrefが # のみの時は、何も返さない
            return false;
        } else {
            // # の後に文字列がある時、ページスクロールを起こす
            var $target = $(_href).offset().top, // スクロール目標
                _easing = 'linear',              // スクロール効果
                _speed = 'slow';                 // スクロール速度('fast', 'nomal', 'slow', ミリ秒)

            $('html, body').animate({ scrollTop: $target }, _speed, _easing);

            return false;
        }
    });
});

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0