jquery: $ (pencere) .scrollTop () ancak $ (pencere) .scrollBottom () yok

Kullanıcı sayfayı her kaydırdığında sayfanın altına bir öğe yerleştirmek istiyorum. Bu "sabit konum" gibi, ancak müşterilerimin çoğu tarayıcısı bunu destekleyemediği için "position: fixed" css kullanamıyorum.

Jquery'nin mevcut görüntü alanının en üst konumunu alabildiğini fark ettim, ancak kaydırma görüntü alanının en altına nasıl ulaşabilirim?

Bu yüzden nasıl bileceğimi soruyorum: $ (window) .scrollBottom ()

var scrollBottom = $(window).scrollTop() + $(window).height();

ScrollTop'un tam tersi olarak bir scrollBottom'un şöyle olması gerektiğini söyleyebilirim:

var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

İşte benim için işe yarayan küçük, çirkin bir test:

// SCROLLTESTER START //
$('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"></h1>').insertAfter('body');

$(window).scroll(function () {
  var st = $(window).scrollTop();
  var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

  $('#st').replaceWith('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;">scrollTop: ' + st + '<br>scrollBottom: ' + scrollBottom + '</h1>');
});
// SCROLLTESTER END //

Gelecek için, scrollBottom'u scrollTop ile aynı şekilde kullanılabilen bir jquery eklentisine dönüştürdüm (yani bir sayı ayarlayabilir ve bu miktarı sayfanın altından kaydıracak ve alttan piksel sayısını döndürecek) sayfanın alt kısmından piksel sayısını döndürürseniz, numara verilmemişse

$.fn.scrollBottom = function(scroll){
  if(typeof scroll === 'number'){
    window.scrollTo(0,$(document).height() - $(window).height() - scroll);
    return $(document).height() - $(window).height() - scroll;
  } else {
    return $(document).height() - $(window).height() - $(window).scrollTop();
  }
}
//Basic Usage
$(window).scrollBottom(500);

var scrollBottom =
    $(document).height() - $(window).height() - $(window).scrollTop();

Alt parşömeni almanın daha iyi olacağını düşünüyorum.

Bu en üste kaydırılacaktır:

$(window).animate({scrollTop: 0});

Bu, en alta kayacaktır:

$(window).animate({scrollTop: $(document).height() + $(window).height()});

.. gerekirse pencereyi istediğiniz konteyner kimliği veya sınıfa değiştirin (tırnak içinde).

Tablo ızgarası için en iyi seçenek aşağı kaydırın, tablo ızgarasının son satırına kaydırılacaktır:

 $('.add-row-btn').click(function () {
     var tempheight = $('#PtsGrid > table').height();
     $('#PtsGrid').animate({
         scrollTop: tempheight
         //scrollTop: $(".scroll-bottom").offset().top
     }, 'slow');
 });

// Back to bottom button
$(window).scroll(function () {
    var scrollBottom = $(this).scrollTop() + $(this).height();
    var scrollTop = $(this).scrollTop();
    var pageHeight = $('html, body').height();//Fixed

    if ($(this).scrollTop() > pageHeight - 700) {
        $('.back-to-bottom').fadeOut('slow');
    } else {
        if ($(this).scrollTop() < 100) {
            $('.back-to-bottom').fadeOut('slow');
        }
        else {
            $('.back-to-bottom').fadeIn('slow');
        }
    }
});
$('.back-to-bottom').click(function () {
    var pageHeight = $('html, body').height();//Fixed
    $('html, body').animate({ scrollTop: pageHeight }, 1500, 'easeInOutExpo');
    return false;
});

Deneyin:

 $(window).scrollTop( $('body').height() );

var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();

Bu hızlı bir kesmedir: kaydırma değerini çok büyük bir sayıya atamanız yeterlidir. Bu, sayfanın en alta kaydırılmasını sağlayacaktır. Düz javascript kullanarak:

document.body.scrollTop = 100000;