皆さんこんにちは、カラーオンです。

今回はウェブサイト作成に関して、ページトップへボタンをご紹介します。

縦長になったページでは一瞬にしてそのページのトップまで戻ることができるボタンがあることが望ましいでしょう。

そのページ内のリンクをクリックせずにページ下部まで移動した後、次の情報へのアクセスが簡単でないことはページからの離脱を招きます。次の情報へいかにしてストレスなく導くことができるかが重要です。

JavaScriptを使用したページトップへボタンでカラーオンが気に入っているものがこちらのページで紹介されている、『1.ちょっとスクロールしたら「トップへ戻るボタン」を表示』です。

www.webopixel.net

カラーオンのサイトでも表示をCSSで変更して利用させて頂いています。

jQueryというJavaScriptライブラリーを使用して、ページのトップへいきなりジャンプするのではなく、エレベーター式にスライドしていきます。エレベーター式に移動する方法は多くのサイトで導入されていて、その動作が心地よいです。いきなりページのトップへジャンプするとページが変わったようにも感じて違和感がありますよね。

「jQueryを使用して」と書きましたが、どうやって使用するのかというと…

こちらより必要なファイルをダウンロードしてサイト上にアップロードして使用します。

各ページにおいてjQueryファイルを読み込んで、その上でページトップへボタン用のJavaScriptを読み込んで、CSSで表示をデザインします。

jQueryはページに様々な動的プログラムを導入することができます。無数のサイトでjQueryを使用したスライドショーやリンクボタンなどのJavaScriptプログラムが紹介されていますので、ページに取り込みやすいですね。

HTMLファイルのhead内でjQueryを読み込んで、その後にページトップへボタン用のJavaScriptを配置します。

CSSでデザインして、body内の最下部にボタン表示の為のコードを追加します。

＜カラーオンが使用しているJavaScript＞

$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 250);
return false;
});
});

ページを下へスクロールしたらボタンがフェードインして、クリックしたときのページトップへスクロールする秒数などを指定しています。

＜カラーオンが使用しているCSS＞

#page-top {
position: fixed;
bottom: 15px;
right: 15px;
font-size: 40px;
filter: alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
#page-top a {
background: #666;
text-decoration: none;
color: #fff;
padding: 5px 15px;
text-align: center;
display: block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}

背景色、角の丸み、表示位置、透明度などをCSSでデザインしています。

ちなみに、カラーオンではボタン自体には画像を使用しています。

是非参考にしてみてください。