PCサイトがありスマホサイトもある、という場合は
コンテンツが同じ内容だとスマホサイトってどうしても縦長になりますわね。
対策としてはページ下部にもナビゲーションつける、などがありますけども
「ページ最上部に戻る」というページ内リンクで処理する場合もあります。
その際に「ページ最下部に達した時にボタンを表示させる」というのを思いつき
ちょいと色々と試行錯誤してみましたよ、ってお話です。
（普通に最下部に固定表示しとけばいいやん・・って話ですが）
ページをスクロールさせて最下部に来たら読み込み開始する、という処理は
あの「AutoPagerize」を筆頭に、最近ではTwitterなどに実装されてるので
Javascriptでなんとか出来るはず、と検索を開始。
そしてまず見つけたのがこのサイトでした。
jQueryを使用したスクリプトが紹介されてます。
はてなブログでスマホ表示の際に「トップへ戻るボタン」を表示させる方法。
http://lunasaurus.hatenablog.com/entry/2014/01/08/211236
まずはこれをそのまま実装してみたらちゃんと動いたのだけれども
これはスクロールする量がある一定に達すると動作する、というもので
コンテンツの長さが違うサイトにはちょいと不向きかな、と。
それなら「ページ最下部に達すると表示」という風に改造してみた。
それで一応は動いたのだけれども、それだとiOSのSafariではボタンが表示しない・・・
どうやらメニューバーの高さを含むとか含まないなどの差異がブラウザによってあるみたい。
それなら・・・・・・・
「一番下からいくつか引いた数に達したらボタン表示」でいいんじゃね、と落ち着いたのが次。
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
var bottomPos = 100;
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if (scrollPosition > scrollHeight - bottomPos) {
topBtn.fadeIn();}
else { topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0}, 500);
return false;
});
});
bottomPosで設定した100（ピクセル）という高さを引いてあげると
Android、iOSともにちゃんと表示されました。
HTML側のボタンを表示させたい場所（大抵はフッターあたり）に
<p id="page-top"><a href="#top">ページの先頭へ</a></p>
と、書いてあげればOKです。
CSSは引用元様のを色だけ変えてそのまま流用。
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #450000;
text-decoration: none;
color: #fff;
width: 100px;
padding: 15px 0;
text-align: center;
display: block;
border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}
ページ最上部に戻る際もスルスルっとスクロールするので良い感じですよ。
