ウェブページの「ページトップ（PAGE TOP）」に戻るためのボタンは、長いページを訪れたユーザーにとって非常に便利な機能です。しかし、固定された位置に配置されたボタンではなく、ページのスクロールに応じて自動的に表示されるようなボタンを実装したいと考えることはありませんか？
この記事では、jquery.scrollUp.jsというプラグインを使用して、スクロール位置に応じて「ページトップ」へのアンカーリンクを自動で表示し、クリックすると滑らかにページの最上部に戻る方法を解説します。特に、ウェブページ制作やエンジニアの方に向けて、シンプルでわかりやすい手順で説明していきます。
jquery.scrollUp.jsとは
まず、jquery.scrollUp.jsとは何かについて説明します。このプラグインは、jQueryを利用して、ユーザーがページをスクロールした際にページトップへのリンクを表示させるためのものです。例えば、ユーザーが長い記事や製品リストを読んでいるときに、ページの上部に戻るためのボタンが画面に表示され、ワンクリックで元の位置に戻ることができます。この機能はユーザーエクスペリエンス（UX）の向上に貢献し、特にスマートフォンやタブレットなどのデバイスでの閲覧時に便利です。
このプラグインの主な特徴は以下の通りです：
- スクロール位置に応じてボタンが表示される
- スクロール速度やアニメーションをカスタマイズ可能
- CSSでデザインを自由に変更できる
次に、具体的な実装方法について見ていきましょう。
「ページトップ」アンカーリンクを任意の箇所に自動表示させるCSSの記述
まずは、ページトップへのリンクの見た目を決めるCSSの記述から始めます。以下のコードは、スクロールボタンがどのように表示されるかを制御するためのCSSスタイルです。このコードをウェブページのヘッダー部分に追加します。
<style type="text/css">
<!--
body {
margin: 0px;
font-size:14px;
}
h1{
font-size:16px;
font-weight:normal;
line-height:1.4em;
text-align:left;
padding:15px 0;
}
p{
padding-top:150px;
}
#idWrap{
width:550px;
margin:0 auto;
text-align:center;
height:4000px;
}
#scrollUp {
bottom: 20px;
right: 20px;
background: #555;
color: #fff;
font-size: 12px;
font-family: sans-serif;
text-decoration: none;
opacity: .9;
padding: 10px 20px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-transition: background 200ms linear;
-moz-transition: background 200ms linear;
transition: background 200ms linear;
}
#scrollUp:hover {
background: #000;
}
-->
</style>
CSSのポイント解説
- #scrollUpセレクタは、ページトップボタンのスタイルを定義します。背景色（background）、文字色（color）、フォントサイズ（font-size）、パディング（padding）、ボーダーの丸み（border-radius）などが設定されています。
- #scrollUp:hoverでは、ボタンにホバーした際の背景色を変更する効果を指定しています。これにより、ユーザーがボタンにカーソルを合わせたときに視覚的なフィードバックを提供します。
このCSSスタイルは、必要に応じてカスタマイズ可能です。例えば、ボタンの位置や色、フォントサイズなどは、ウェブサイトのデザインに合わせて調整してください。
jquery.scrollUp.jsを使って、「ページトップ」アンカーリンクを任意の箇所に自動表示させるJavaScriptの記述
次に、jquery.scrollUp.jsを実際に使ってページトップボタンを動作させるためのJavaScriptコードを見ていきます。まずは、jquery.min.js、jquery.scrollUp.jsプラグインを読み込む必要があります。これらをHTMLのheadタグ内またはbodyタグの閉じタグ直前に追加します。
$.scrollUp({オプション})でオプションにスクロールタグid、スクロールスピード、アンカーリンクテキスト等を設定します。オプション無し（コメントアウトしてます）でも動作します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollUp.js"></script>
<script type="text/javascript">
/*
$(function () {
$.scrollUp(); //オプション無しでも良い様です。
});
*/
$(function () {
$.scrollUp({
scrollName: 'scrollUp', // Element ID
topDistance: '300', // Distance from top before showing element (px)
topSpeed: 300, // Speed back to top (ms)
animation: 'fade', // Fade, slide, none
animationInSpeed: 200, // Animation in speed (ms)
animationOutSpeed: 200, // Animation out speed (ms)
scrollText: 'PAGE TOP △', // Text for element
activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
});
});
</script>
JavaScriptのポイント解説
- scrollNameは、ページトップボタンの要素IDを指定します。このIDを使ってCSSスタイルを適用し、ページ内でボタンを特定します。
- topDistanceは、ユーザーがページをどれくらいスクロールしたらボタンを表示するかをピクセル単位で指定します。ここでは、ページの上部から300pxスクロールした時点でボタンが表示されます。
- topSpeedは、ボタンをクリックしたときにページがトップに戻る速度をミリ秒単位で指定します。例えば、topSpeed: 300の場合、300ミリ秒（0.3秒）でトップに戻ります。
- animationは、ボタンが表示される際のアニメーション効果を指定します。「fade」はフェードイン・フェードアウト、「slide」はスライドイン・スライドアウト、「none」はアニメーションなしを意味します。
- scrollTextは、ボタンに表示するテキストを設定します。このテキストはCSSでスタイルを変更できます。
このコードをページに追加することで、ユーザーが指定したスクロール位置に達すると「ページトップ」ボタンが自動的に表示され、クリックするとスムーズにページの上部に戻る機能が実装されます。
「ページトップ」アンカーリンクを任意の箇所に自動表示させるHTMLの記述
最後に、HTMLコードを見ていきましょう。このコードは、デモページを作成するために使用されます。特に、縦に長いページ（4000px以上）を用意することで、スクロールを実感できるようにしています。
<div id="idWrap">
<h1>下にスクロールするとページトップへ（PAGE TOP △）のアンカーリンクをページの右下に自動表示します。</h1>
<p>ずっと（4000px位）下にスクロールして見て下さい。</p>
<div>↓↓↓↓↓↓↓↓↓↓</div>
</div>
HTMLのポイント解説
- idWrapは、ページ全体を囲むラッパー要素です。この要素には固定幅（550px）と、中央揃え（margin:0 auto）が設定されています。
- h1タグ内のテキストは、スクロールを促すための説明です。ユーザーに対して、ページを下にスクロールすると「ページトップ」ボタンが表示されることを示します。
- pタグ内のテキストには、ページがどれほど長いかを示すために、スクロールの具体的な長さ（4000px）を記載しています。これにより、実際にスクロールして確認できるようにしています。
ページトップへのアンカーリンクを任意の箇所に自動表示させるデモページ
実際に動作を確認したい方は、以下のデモページを参照してください。このページでは、先ほど紹介したコードがどのように機能するかを体験できます。
ページトップへのアンカーリンクを任意の箇所に自動表示させるデモ
このデモページを参考にして、自分のウェブサイトにも同様の機能を追加してみてください。
ソース元：scrollUp jQuery plugin
まとめ
この記事では、jquery.scrollUp.jsを使用して、ウェブページの任意のスクロール位置に「ページトップ」へのリンクを自動表示させる方法を解説しました。この機能は、特に長いページやコンテンツが豊富なウェブサイトでのユーザーエクスペリエンスを向上させるために非常に役立ちます。CSSとJavaScriptの基本的な知識があれば、簡単に実装できるので、ぜひ試してみてください。
ウェブサイトの操作性を向上させ、訪問者が快適にページを閲覧できるように工夫することは、ユーザー満足度の向上に直結します。この機会に、他の便利なjQueryプラグインも活用してみてください。
このようにして、あなたのウェブサイトに「ページトップ」ボタンを導入することで、ユーザーがコンテンツを快適に楽しむことができる環境を提供しましょう。ページが長くなるほど、この機能の重要性が増します。初心者でも取り組みやすい方法で、ウェブサイトの操作性を改善してみてください。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
