オプション:スクロールスピードの調節

「jQuery Scrollable Link」では、画面単位のスクロール速度が800ミリ秒(0.8秒)に設定されています。この速度は、自由に変更ができます。カスタマイズするには、HTML側に望みのミリ秒を追記する方法と、JavaScriptソース自体を書き換える方法があります。

HTMLのリンク(a要素)に、望みの秒数を指定する方法
リンクを作るa要素に、「data-speed」という属性を加えることで、望みの秒数(ミリ秒)を指定できます。例えば、以下のように記述します。
<a href="#page1" class="scrollable" data-speed="2500">PAGE.1</a>
上記の場合は「2500ミリ秒」(=2.5秒)になり、かなりゆっくりとしたスクロールになります。この方法での指定は、リンクごとに異なる秒数を指定できるメリットがあります。

JavaScriptソースを修正して、デフォルトの秒数を変更する方法
すべてのリンクの速度を一括変更したいなら、HTMLに属性を付加するよりもJavaScriptソースを修正する方が楽です。 「jQuery Scrollable Link」の本体であるjquery.scrollablelink.jsファイルをテキストエディタで開くと、17行目に以下の記述が見えます。
var speed = $anchr.data('speed') || 800;
この行末にある「800」の部分が、デフォルトの秒数(ミリ秒)です。ここを自由に書き換えれば、デフォルトの秒数を変更できます。

上記の両方の方法でスクロール速度を変更したサンプルページを用意しました。閲覧してみる場合は、「速度を修正したサンプルページ」をご覧下さい。本記事2ページ目の「手順4」の時点で作成したサンプルソースを元にして、速度を修正する記述を加えてあります。

1画面ずつスクロールして進むウェブページを簡単に作成

今回は、jQueryプラグイン「jQuery Scrollable Link」とCSSを使って、1画面ずつスクロールして進む形のウェブページを簡単に作成する方法をご紹介致しました。ぜひ活用してみて下さい。

【関連記事】




■All Aboutで「お金」について、アンケートを実施中です!
回答いただいた内容をAll About記事企画の参考にさせていただきます
※2021/6/1~2021/6/30まで

・【誰でも回答可】「毎月の家計についてのアンケート」に回答する
抽選で10名にAmazonギフト券1000円分プレゼント

・【40歳以上限定】「相続と親の資産管理についてのアンケート」に回答する
抽選で20名にAmazonギフト券1000円分プレゼント

※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。