web-dev-qa-db-fra.com

jquery: $ (fenêtre) .scrollTop () mais pas $ (fenêtre) .scrollBottom ()

Je souhaite placer un élément au 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 "css: fixe" css car beaucoup de navigateurs de mes clients ne peuvent pas le supporter.

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

Je demande donc comment savoir: $ (fenêtre) .scrollBottom () 

javascriptjquery
77
Bin Chen
var scrollBottom = $(window).scrollTop() + $(window).height();
133
David Tang

Je dirais qu'un scrollBottom en tant que contraire de scrollTop devrait être:

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

Voici un petit test moche 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 //
79
Alfred

Pour le futur, 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 le faire défiler à partir du bas de la page et renvoyer le nombre de pixels du bas). de la page, ou retourne le nombre de pixels 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);
8
Zephyr
var scrollBottom =
    $(document).height() - $(window).height() - $(window).scrollTop();

Je pense qu'il est préférable de faire défiler en bas.

4
user944293

Cela fera défiler vers le haut:

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

Cela fera défiler vers le bas:

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

.. changer la fenêtre à votre id de conteneur ou classe désiré si nécessaire (entre guillemets).

0
snoop_dog

Voici la meilleure option. Faites défiler vers le bas pour la grille de tableau, ce sera la dernière ligne de la grille: 

 $('.add-row-btn').click(function () {
     var tempheight = $('#PtsGrid > table').height();
     $('#PtsGrid').animate({
         scrollTop: tempheight
         //scrollTop: $(".scroll-bottom").offset().top
     }, 'slow');
 });
0
SantoshK
// 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;
});
0
Ghebrehiywet