ページトップへスルスル移動--スクロールアップ【無料】

イメージ画像:スクロールアップ

ホームページの別のページへ移動するためのナビゲーションバーが上のほうにしかない場合、それでもってそのページがやたらに長~い場合、えっちら、おっちらとスクロールしなければなりません。こんなとき、クリック一発でトップに戻れたら、いいですよね。

  • クリックしたら、スルスルとトップに戻れ。
  • トップに戻るボタンは、最初はいらん。
  • でもそれ以外は、いつでも待機していてくれ。
  • それでいて、閲覧の邪魔にならないように。
  • ボタン画像を自分で用意するのはめんどくさい。
  • だからといって、ヨソのサイトと同じじゃイヤだ。
  • スマホでも押しやすく。
  • 自分で設定できるヤツをタダでちょうだい。

こういった要望に応えたのが、デジタルエイドの スクロールアップ です。

といっても「同じようなプログラムはすでにあるじゃないか、それをコピペすれば済む話」と思われた方もいるかもしれません。実際、類似のプログラムは、Google 検索すればザクザク出てきます。ところが、これらのプログラムには重大なバグがあります。しかもインターネットの常で、無料で公開されたプログラムを検証もせずに、自分のサイトに再掲載しているケースが多いのです。
結果として、欠陥プログラムが蔓延するという事態を招いてします。

デジタルエイドは独自にプログラムを開発し、無料で公開します。
すでに、類似のプログラムを導入している方も、乗り換えをご検討ください。

スクロールアップ ダウンロードページ

スクロールアップの3つの特長

  1. スクロールボタンは画像ではなくCSS。
  2. スクロールボタンの出現位置を自動調整。
  3. ブラウザに負荷がかからない。

1.スクロールボタンは画像ではなくCSS

「このページのトップへ」を表すボタンは画像ではなく、CSSで表示しています。
これによって画像を作成したり、画像にパスを通す手間を省きました。
さらに、CSSボタンは基本色、赤、オレンジ、黄、緑、青、紫の6色のなかから選べます。
なお、色を指定しない場合は、黒になります。

ボタンクラス指定
class="red"
オレンジ
class="orange"
class="green"
class="blue"
class="purple"
class="yellow"
クラス指定なし

2.スクロールボタンの出現位置を自動調整

類似のプログラムでは、トップから400pxとか500pxとか、スクロールするとボタンが出現します。しかしこの位置ではスマホなど小さな画面で見ている人には出現が遅すぎ、大型モニタで見ている人には早すぎます。
デジタルエイドのスクロールアップは、ユーザーが見ているそれぞれの画面の縦サイズを基準にして、最初の一画面をすぎるとスクロールボタンが出現するように自動で調整しています。

3.ブラウザに負荷がかからない

通常、この種のプログラムはマウススクロールを常時監視し、マウスがページのどのあたりにいるかによって、スクロールボタンを表示/非表示を切り替えています。しかしマウススクロールを常時監視するのは、ブラウザにたいへん負荷をかけます。そのため、長時間そのページに滞在すると、ブラウザが誤動作を起こしかねず、ユーザーに迷惑をかけます。類似のプログラムはこの問題を見落としています。
デジタルエイドのスクロールアップは、マウススクロールの監視を最低限必要な時だけに限定し、ブラウザへの負荷を大幅に軽減しています。

スクロールアップ ダウンロードページ

スクロールアップの使用条件

スクロールアップは、CC(クリエイティブ コモンズ)ライセンスの 表示 + 継承 です。 ですので、 jquery.scroll-up.js と scroll-up.css 冒頭の弊社のクレジットは消さないでください。
プログラムの改変は自由ですが、改変したプログラムは、本プログラムと同様、CC(クリエイティブ コモンズ)ライセンスの 表示 + 継承 で公開しなければなりません。
なお、商用/非商用関係なく、許可なく、お使いいただけます。

まとめ

スクロールアップは、長いホームページをある程度スクロールすると、画面下に出現するボタンで、クリックすると、スルスルっとページトップへ戻っていきます。
デジタルエイドでは、ボタンに画像を使わず、CSS(6色)で表示します。また類似プログラムの持つバグを解消し、ホームページユーザーが安心して閲覧できるように配慮しています。
スクロールアップは無料でダウンロードできます。


コメントを残す