jQuery Scroll naar onderkant van pagina/iframe

Hoe gebruik ik jQuery om helemaal naar de onderkant van een iframe of pagina te scrollen?

Antwoord 1, autoriteit 100%

Als je een mooie langzame animatie wilt scrollen, scroll je voor elk anker met href="#bottom"naar beneden:

$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

Voel je vrij om de selector te wijzigen.

Antwoord 2, autoriteit 58%

scrollTop() retourneert het aantal pixels dat aan het zicht is onttrokken vanuit het schuifbare gebied, dus geef het:

$(document).height()

overschrijdt eigenlijk de onderkant van de pagina. Om het scrollen onder aan de pagina daadwerkelijk te laten ‘stoppen’, moet de huidige hoogte van het browservenster worden afgetrokken. Dit maakt het gebruik van versoepeling mogelijk indien nodig, dus het wordt:

$('html, body').animate({ 
   scrollTop: $(document).height()-$(window).height()}, 
   1400, 
   "easeOutQuint"
);

Antwoord 3, autoriteit 10%

Bijvoorbeeld:

$('html, body').scrollTop($(document).height());

Antwoord 4, autoriteit 4%

Nadat deze thread niet werkte voor mijn specifieke behoefte (scrollen binnen een bepaald element, in mijn geval een textarea), ontdekte ik dit in het grote hiernamaals, wat nuttig zou kunnen zijn voor iemand anders die deze discussie leest:

Alternatief op planetcloud

Omdat ik al een gecachte versie van mijn jQuery-object had (het myPanelin de onderstaande code is het jQuery-object), was de code die ik aan mijn gebeurtenishandler heb toegevoegd eenvoudig deze:

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

(bedankt Ben)

Antwoord 5

Een eenvoudige functie die naar de onderkant van de hele pagina springt (direct scrollt). Het gebruikt de ingebouwde .scrollTop(). Ik heb niet geprobeerd dit aan te passen om met afzonderlijke pagina-elementen te werken.

function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height() - $(window).height() );
}

Antwoord 6

Deze werkte voor mij:

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  // We're at the bottom.
}

Antwoord 7

Als je niets om animatie geeft, hoef je de hoogte van het element niet te bepalen. Tenminste in alle browsers die ik heb geprobeerd, als je scrollTopeen getal geeft dat groter is dan het maximum, zal het gewoon naar beneden scrollen. Dus geef het het grootst mogelijke aantal:

$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);

Als je door de pagina wilt scrollen in plaats van een element met een schuifbalk, maak dan gewoon myScrollingElementgelijk aan ‘body, html’.

Omdat ik dit op verschillende plaatsen moet doen, heb ik een snelle en vuile jQuery-functie geschreven om het handiger te maken, zoals deze:

(function($) {
  $.fn.scrollToBottom = function() {
    return this.each(function (i, element) {
      $(element).scrollTop(Number.MAX_SAFE_INTEGER);
    });
  };
}(jQuery));

Dus ik kan dit doen als ik een Buncho ‘-spullen bijvoegt:

$(myScrollingElement).append(lotsOfHtml).scrollToBottom();

8

$('.block').scrollTop($('.block')[0].scrollHeight);

Ik gebruik deze code om door de chat te bladeren wanneer nieuwe berichten aankomen.