5

ページの右下隅に浮かぶ「トップに移動」ボタンを実装しようとしています。次のコードでこれを行うことができますが、このボタンがページのフッターに入らないようにします。ユーザーがページをページの一番下までスクロールしたときに、フッターに入らないようにして一番上に留まるにはどうすればよいですか?

CSS

#to-top {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 100px;
  padding: 5px;
  border: 1px solid #ccc;
  background: #f7f7f7;
  color: #333;
  text-align: center;
  cursor: pointer;
  display: none;
}

JavaScript

$(window).scroll(function() {
  if($(this).scrollTop() != 0) {
    $('#to-top').fadeIn(); 
  } else {
    $('#to-top').fadeOut();
  }
});

$('#to-top').click(function() {
  $('body,html').animate({scrollTop:0},"fast");
});

HTML

<div id="to-top">Back to Top</div>

編集 これは、それがどのように見えるかの図です。黒い縦の長方形はスクロール バーです。「トップに戻る」ボタンはフッター領域に入らないようにします。 ここに画像の説明を入力

ここにjsfiddleがあります。

4

3 に答える 3

2

解決策は、私が思っていたよりも複雑であることが判明しました。これが私の解決策です。

この関数を使用して、画面にフッターが表示されているかどうかを確認します。そうであればposition: absolute、div 内にボタンを配置します。それ以外の場合は、 を使用しますposition: fixed。

function isVisible(elment) {
    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elment).offset().top;

    return y <= (vpH + st);
}

$(window).scroll(function() {
    if($(this).scrollTop() == 0) {
        $('#to-top').fadeOut();
    } else if (isVisible($('footer'))) {
        $('#to-top').css('position','absolute');
    } else {
        $('#to-top').css('position','fixed');
        $('#to-top').fadeIn();
    }
});

jsfiddle

于 2013-08-27T11:25:01.827 に答える