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

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

スムーズにスクロールするjQueryプラグイン

More than 3 years have passed since last update.

今までnpmに登録していなかったので作りなおして登録しましたっ!

スムーズにスクロールするプラグインは色々あるのですが、
必要な機能を備えたプラグインが見つからなかったので作ってみました。

前々からつくってはいたのですが、
昔の拙いコードが残っていたので少し整理しました。

仕様

  1. アンカーで移動後にアドレスを変更(アドレスにハッシュを付与する)。
  2. 座標を指定してのページ内リンク。
  3. ロード時にページの先頭からハッシュの位置までスムーズに移動することができる。
  4. 移動完了後に指定した関数を実行。
  5. スクロール途中、マウススクロールしたときにカクカクした動きをする問題をスクロールをストップすることで回避。
  6. スクロール途中に画面をクリックした場合にスクロールが止まる。

デモ

DEMO

必要なプラグイン

スクロール時のanimateeasingの初期値にeaseOutQuartを使用しているため、このプラグインが必要です。

インストール

Npm

npm install jquery.smooth-page-scroll

使い方

<script src="js/jquery.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.smoothPageScroll.js"></script>
<script>
$.smoothPageScrollByLoaded();
$('a[href^="#"]').smoothPageScroll();
</script>

a要素以外につけたい場合

$('h1').smoothPageScroll({
    target: '#header'
});

移動後に関数実行

$('a[href^="#"]').smoothPageScroll({
    complate: function(e) {
        console.log(e);
    }
});

座標を指定してリンク

#1000,1000
//(x, y)

任意のタイミングでスクロールする

$.smoothPageScrollStart({
    target: '#header'
});

Options

option name type Descriptions default
easing String イージングの種類 'easeOutQuart'
speed Number スクロールスピード 1000
delay Number スクロール開始までの待ち時間($('body').animate.delay(delay) -999999
target String or jQuery Object 直接ターゲットを指定する (例) #header or $(#header) ※ 値の指定がない場合は(0, 0)になります。 undefined
complate Function スクロール完了後に実行したい関数 ''
isAddHash Boolean スクロール後にhashを追加するか true
isTopScroll Boolean 縦方向にスクロールするか true
isLeftScroll Boolean 横方向にスクロールするか true

初期設定

//ロード時の処理
$.smoothPageScrollByLoaded({
    easing: 'easeOutQuart',
    speed: 1000,
    complate:'',
    target: location.hash,
    isAddHash: true,
    isTopScroll: true,
    isLeftScroll: true
});

//クリック時の処理
$('a[href^="#"]').smoothPageScroll({
    easing: 'easeOutQuart',
    speed: 1000,
    delay: 0,
    target: undefined,
    complate: '',
    isAddHash: true,
    isTopScroll: true,
    isLeftScroll: true
});
kamem
学校の講師とか、プロジェクトに参加してサイト作ったりしてます。 Design/Photoshop/Illustrator/HTML/CSS/Sass/Postcss/Javascript/ES6/Babel/jQuery/Typescript/React/Vue/Node
http://clover.blue/
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