memocarilog

言葉で説明すると難しいのですが、よくあるスクロールすると「ページトップへ」のボタンが出現して、そのままスクロールに合わせてついてくるものを、そのままページ下までついてこさせずにフッターの位置で止める方法です。IEはバージョン7以上で動きました。

「サンプル」を作りましたのでこちらをご覧頂ければわかりやすいかもしれません。

（サンプルデモのコードは一番下にあります。）

ページトップボタンのHTML

ページトップボタンのHTMLは以下のようにします。

<p class="gotop">
<a href="#">
<img src="images/gotop.png" alt="ページトップへ戻る">
</a>
</p>

CSS

ページを包んでいる一番親の要素へrelativeを設定します。

#container{
position: relative;
}

ボタンのCSSは以下のように position を fixed にして固定し、位置を指定します。

p.gotop{
position: fixed;
right: 5%;
bottom: 0;
}
p.gotop a{
width: 125px;
height: 94px;
display: block;
}

jQueryのコード

jQuery本体をヘッダー内で読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

続けてヘッダー内または外部のJsファイルへ以下のように記入します。

フッターの高さを取得し、現在のスクロール位置がフッターの高さに入ったら、ページトップボタンのCSSを fixed から absolute に変更してフッターの高さの位置に固定しています。

<script>
$(document).ready(function(){

$(".gotop").hide();
// ↑ページトップボタンを非表示にする

$(window).on("scroll", function() {

if ($(this).scrollTop() > 100) {
// ↑ スクロール位置が100よりも小さい場合に以下の処理をする
$('.gotop').slideDown("fast");
// ↑ (100より小さい時は)ページトップボタンをスライドダウン
} else {
$('.gotop').slideUp("fast");
// ↑ それ以外の場合の場合はスライドアップする。
}

// フッター固定する

scrollHeight = $(document).height();
// ドキュメントの高さ
scrollPosition = $(window).height() + $(window).scrollTop();
//　ウィンドウの高さ+スクロールした高さ→　現在のトップからの位置
footHeight = $("footer").innerHeight();
// フッターの高さ

if ( scrollHeight - scrollPosition  <= footHeight ) {
// 現在の下から位置が、フッターの高さの位置にはいったら
//  ".gotop"のpositionをabsoluteに変更し、フッターの高さの位置にする
$(".gotop").css({
"position":"absolute",
"bottom": footHeight
});
} else {
// それ以外の場合は元のcssスタイルを指定
$(".gotop").css({
"position":"fixed",
"bottom": "0px"
});
}
});

// トップへスムーススクロール
$('.gotop a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
// ページのトップへ 500 のスピードでスクロールする
return false;
});

});
</script>

フッター部分にページトップボタンがかぶって見づらくなるような場合などによいと思います。

サンプルデモのコード

サンプルのヘッド内jQuery部分のHTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

$(".gotop").hide();

$(window).on("scroll", function() {

if ($(this).scrollTop() > 100) {
$('.gotop').slideDown("fast");
} else {
$('.gotop').slideUp("fast");
}

scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
footHeight = $("footer").innerHeight();

if ( scrollHeight - scrollPosition  <= footHeight ) {
$(".gotop").css({
"position":"absolute",
"bottom": footHeight
});
} else {
$(".gotop").css({
"position":"fixed",
"bottom": "0px"
});
}
});

$('.gotop a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>

サンプルのbody内のコード

<div id="container">
<header id="header">
<h1>ページトップへ戻るボタンをフッターに固定するサンプルデモ｜memocarilog</h1>
</header><!-- fin_header -->

<div id="content">
<p><a href="#">● 元のページへ戻る</a></p>
<p>下へスクロール</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
</div>

<p class="gotop">
<a href="#"><img src="images/gotop.png" alt="ページトップへ戻る"></a>
</p>

<footer id="footer">
<p class="copy"><small>Copyright©2013 memocarilog.All Right Reserved</small></p>
</footer><!-- footer -->
</div><!--container-->
</body>

サンプルのレイアウト部分のCSS

h1{
font-size: 2em;
line-height: 1.3;
padding: 80px 0 150px;
color: #D25C3E;
text-shadow: 0px 1px 1px #FFEFD5;
}
#container{
width: 100%;
background: url(images/bg.png);
position: relative;
}
#header{
width: 700px;
margin: 0 auto;
}
#content{
width: 700px;
height: 1200px;
margin: 0 auto;
text-align: center;
}
#content p{
color:#fff;
font-weight: bold;
margin-bottom: 150px;
text-shadow: 0px 1px 1px #ccc;
}
#content p a{
color:#F7B797;
text-decoration: none;
text-shadow: 0px 1px 1px #fff;
}
#content p a:hover{
color:#D25C3E;
}
.gotop{
position: fixed;
left: 50%;
bottom: 0;
margin:0 0 0 -63px;
}
.gotop a{
width: 125px;
height: 94px;
display: block;
}
#footer{
min-height: 273px;
background: url(images/foot_back.png) repeat-x;
text-align: center;
}
#footer .copy {
padding-top:150px;
}
#footer .copy small{
color: #fff;
font-size: 14px;
}