Float a div at the bottom right corner, but not inside Fußzeile

Question

Ich versuche, eine Schaltfläche "Nach oben" zu implementieren, die in der unteren rechten Ecke einer Seite schwebt. Ich kann dies mit folgendem Code tun, aber ich möchte nicht, dass diese Schaltfläche den Footer meiner Seite betritt. Wie kann ich verhindern, dass sie in den Footer gelangt und oben bleibt, wenn der Benutzer die Seite nach unten scrollt?

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

Zum Seitenanfang

BEARBEITEN Hier ist eine Zeichnung, wie es aussehen sollte. Das schwarze vertikale Rechteck ist eine Scrollleiste. Die Schaltfläche "Zum Seitenanfang" sollte niemals in den Footer-Bereich gelangen.

Hier ist ein jsfiddle.

Answer 1

Die Lösung stellte sich als komplizierter heraus, als ich dachte. Hier ist meine Lösung.

Sie verwendet diese Funktion, um zu überprüfen, ob der Footer auf dem Bildschirm sichtbar ist. Wenn ja, positioniert sie den Button mit position: absolute innerhalb eines div-Elements. Andernfalls wird position: fixed verwendet.

function isVisible(element) {
    var vpH = $(window).height(), // Viewport-Höhe
        st = $(window).scrollTop(), // Bildlauf oben
        y = $(element).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

Answer 2

Erhöhen Sie den Wert von bottom: 10px; als Höhe des Fußzeilenbereichs. Ich habe gerade Ihren Screenshot gesehen, fügen Sie einfach etwas padding-bottom hinzu.

Answer 3

Lösung

$(document).ready(function(){
    $(window).scroll(function(){
        btnBottom = $(".btt").offset().top + $(".btt").outerHeight();
        ftrTop = $(".footer").offset().top;
        if (btnBottom > ftrTop)
            $(".btt").css("bottom", btnBottom - ftrTop + $(".btt").outerHeight());
    });
});

Fiddle: http://jsfiddle.net/praveenscience/BhvMg/

---

Sie haben vergessen, dem z-Index zu geben, das verhindert, dass es oben liegt!

z-index: 999;

Oder wenn es mit dem Footer Ihrer Seite überlappt, können Sie die Koordinaten erhöhen.

bottom: 50px;

Ihre Frage ist immer noch unklar, "verhindern Sie, dass es in den Footer gelangt". Überlappt es?