jquery: $ (window) .scrollTop () mais pas $ (window) .scrollBottom ()

Je souhaite placer un élément en bas de la page chaque fois que l'utilisateur fait défiler la page. C'est comme "position fixe" mais je ne peux pas utiliser "position: fixed" css car beaucoup de navigateurs de mes clients ne peuvent pas supporter cela.

J'ai remarqué que jquery peut obtenir la position supérieure de la fenêtre courante, mais comment puis-je obtenir le bas de la fenêtre de défilement?

Donc je demande comment savoir: $ (window) .scrollBottom ()

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

Je dirais qu'un scrollBottom en tant qu'opposé direct de scrollTop devrait être:

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

Voici un petit test laid qui fonctionne pour moi:

// 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 //

Pour l'avenir, j'ai fait de scrollBottom un plugin jquery, utilisable de la même manière que scrollTop (c'est-à-dire que vous pouvez définir un nombre et il fera défiler ce montant à partir du bas de la page et retournera le nombre de pixels à partir du bas de la page, ou, renvoie le nombre de pixels à partir du bas de la page si aucun nombre n'est fourni)

$.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();

Je pense qu'il vaut mieux obtenir le défilement du bas.

Cela défilera tout en haut:

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

Cela défilera tout en bas:

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

.. changez la fenêtre avec l'identifiant ou la classe de conteneur souhaité si nécessaire (entre guillemets).

Voici la meilleure option de défilement vers le bas pour la grille du tableau, elle fera défiler jusqu'à la dernière ligne de la grille du tableau:

 $('.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;
});

essayer:

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

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

C'est un hack rapide: attribuez simplement la valeur de défilement à un très grand nombre. Cela garantira que la page défile vers le bas. Utilisation de javascript simple:

document.body.scrollTop = 100000;