本ブログにも実装済の Goto top リンクの実装方法。
ページをスクロールしていくと Goto top リンクが最下部に出現。クリックすると滑らかにスクロールしてトップに戻る。という、あれ。
スマホサイトでは特にユーザビリティの向上が見込めます。
全ページに実装するのが普通だと思うので、JavaScript で動的に差し込みます。
> JavaScript
※jQueryを読み込んでおくのをお忘れなく
$(function() {
$("body").append('<p id="goto-top"></p>');
$("#goto-top").hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) $('#goto-top').fadeIn();
else $('#goto-top').fadeOut();
});
$("#goto-top a").click(function () {
$("body, html").animate({scrollTop: 0}, 500);
return false;
});
});
> CSS
#goto-top {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 999;
width: 60px;
height: 60px;
opacity: 0.5;
cursor: pointer;
background: #333 url(./images/up-arrow.png) no-repeat center center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#goto-top:hover {
opacity: 0.9;
}
> HTML
Androidでposition:fixedを動作させるため、viewportにuser-scalable=noを指定します。
<meta name="viewport" content="user-scalable=no" />
・初期透過度50%、hover時90%、それをCSS3のtarnsitionで滑らかにしているとこがポイント
> 画像（up-arrow.png）
※わかりやすくするためにキャプチャ画像にしています。実際は透過PNGです。
動作は本ブログを参照。すでに右下に出てますよね？