ブログ

WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。

jQuery「fullPage.js」で前後のセクションへ移動させるアンカーリンク

紙芝居のように全画面でコンテンツを表示し、スクロールで次のコンテンツまでスクロールさせるjQueryのプラグイン「fullPage.js」を使用した際に、前後のコンテンツ(セクション)へ移動させるアンカーリンクの備忘録です。

○HTML
<span id="moveUp" class="arrow"></span>
<span id="moveDown" class="arrow"></span>

○JS
//前のセクションへ移動
$(document).on('click', '#moveUp', function(){
fullpage_api.moveSectionUp();
});
//後のセクションへ移動
$(document).on('click', '#moveDown', function(){
fullpage_api.moveSectionDown();
});

アンカーリンクのボタンに「moveUp」と「moveDown」のIDを割り当ててください。

合わせて、自動的にスクロールさせるオプションも、よく使用するので備忘録として。

afterRender: function () {
setInterval(function () {
$.fn.fullpage.moveSectionDown();
}, 5000);//5秒で自動スクロール
} 
投稿日
2021年10月23日
カテゴリー
JavaScript

コメントを残す

デザイン&メディア事業blow→in
大阪府泉佐野市日根野3963-3
サンディア403
TEL.072-468-8786(代)
アパレル&プリント事業moi style
HANDPURI
大阪府泉佐野市日根野4036-1
TEL.0120-610-322
ブランディング事業かつらぎフルーツ
和歌山県かつらぎ町東渋田325-4
TEL.090-3612-3401
飲食店事業cafeblow
[泉佐野店]
大阪府泉佐野市日根野3963-3
TEL.090-5127-9187
[和泉府中店]
大阪府和泉市府中町1-5-2
TEL.080-2412-3192