javascript - Rull automatisk til bunnen av siden

Jeg har en liste med spørsmål. Når jeg klikker på det første spørsmålet, skal det automatisk ta meg til et bestemt element nederst på siden.

Hvordan kan jeg gjøre dette med jQuery?

Svar #1

jQuery er ikke nødvendig. De fleste av toppresultatene jeg fikk fra et Google-søk ga meg dette svaret:

window.scrollTo(0, document.body.scrollHeight);

Når du har nestede elementer, kan det hende dokumentet ikke ruller. I dette tilfellet må du rette deg mot elementet som ruller og bruke dets rullehøyde i stedet.

nestedElement.scrollTo(0, nestedElement.scrollHeight);

Noen ekstra kilder du kan ta en titt på:

  • http://www.alecjacobson.com/weblog/?p=753
  • http://www.mediacollege.com/internet/javascript/page/scroll.html
  • http://www.electrictoolbox.com/jquery-scroll-bottom/

Svar #2

For å bla hele siden til bunnen:

const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

Du kan se demoen her

For å bla et spesifikt element til bunnen:

const scrollToBottom = (id) => {
    const element = document.getElementById(id);
    element.scrollTop = element.scrollHeight;
}

Her er demonstrasjonen

Og slik fungerer det:

Ref: scrollTop, scrollHeight, clientHeight

OPPDATERING: De nyeste versjonene av Chrome (61+) og Firefox støtter ikke rulling av body, se: https://dev.opera.com/articles/fixing-the-scrolltop-bug/

Svar #3

Vanilla JS-implementasjon:

element.scrollIntoView(false);

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Svar #4

Du kan bruke dette til å gå nedover siden i et animasjonsformat.

$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");

Svar #5

en-liner for å rulle jevnt til bunnen

window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });

For å rulle opp, sett ganske enkelt top til 0

Svar #6

Nedenfor bør være løsningen som fungerer på tvers av nettlesere. Den har blitt testet på Chrome, Firefox, Safari og IE11

window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

window.scrollTo(0,document.body.scrollHeight); fungerer ikke på Firefox, i det minste for Firefox 37.0.2

Svar #7

Noen ganger utvider siden seg når man ruller til bunnen (for eksempel på sosiale nettverk), for å rulle ned til slutten (den ytterste bunnen av siden) bruker jeg dette skriptet:

var scrollInterval = setInterval(function() { 
    document.documentElement.scrollTop = document.documentElement.scrollHeight;
}, 50);

Og hvis du er i nettleserens JavaScript-konsoll, kan det være nyttig å kunne stoppe rullingen, så legg til:

var stopScroll = function() { clearInterval(scrollInterval); };

Og deretter bruk stopScroll();.

Hvis du trenger å bla til et bestemt element, bruk:

var element = document.querySelector(".element-selector");
element.scrollIntoView();

Eller universell skript for automatisk rulling til spesifikt element (eller stoppe side rulleintervall):

var notChangedStepsCount = 0;
var scrollInterval = setInterval(function() {
    var element = document.querySelector(".element-selector");
    if (element) { 
        // element found
        clearInterval(scrollInterval);
        element.scrollIntoView();
    } else if((document.documentElement.scrollTop + window.innerHeight) != document.documentElement.scrollHeight) { 
        // no element -> scrolling
        notChangedStepsCount = 0;
        document.documentElement.scrollTop = document.documentElement.scrollHeight;
    } else if (notChangedStepsCount > 20) { 
        // no more space to scroll
        clearInterval(scrollInterval);
    } else {
        // waiting for possible extension (autoload) of the page
        notChangedStepsCount++;
    }
}, 50);

Svar #8

Kun CSS?!

Et interessant alternativ kun med CSS:

display: flex; 
flex-direction: column-reverse;

  /* ...probably usually along with: */

overflow-y: scroll;  /* or hidden or auto */
height: 100px; /* or whatever */

Det er ikke vanntett, men jeg har funnet det nyttig i flere situasjoner.

Dokumentasjon: flex, flex-direction, overflow-y

Demo:

var i=0, foo='Lorem Ipsum & foo in bar or blah ! on and'.split(' ');
setInterval(function(){demo.innerHTML+=foo[i++%foo.length]+' '},200)
#demo{ display:flex;
       flex-direction:column-reverse;
       overflow-y:scroll;
       width:150px; 
       height:150px;
       border:3px solid black; }
body{ font-family:arial,sans-serif; 
      font-size:15px; }
Autoscrolling demo:🐾
<div id='demo'></div>

Svar #9

du kan gjøre dette også med animasjon, det er veldig enkelt

$('html, body').animate({
   scrollTop: $('footer').offset().top
   //scrollTop: $('#your-id').offset().top
   //scrollTop: $('.your-class').offset().top
}, 'slow');

håp hjelper, takk

Svar #10

Du kan bruke denne funksjonen hvor som helst du trenger å kalle den:

function scroll_to(div){
   if (div.scrollTop < div.scrollHeight - div.clientHeight)
        div.scrollTop += 10; // move down

}

jquery.com: ScrollTo

Svar #11

Så mange svar prøver å beregne høyden på dokumentet. Men det beregnet ikke riktig for meg. Imidlertid fungerte begge disse:

jquery

    $('html,body').animate({scrollTop: 9999});

eller bare js

    window.scrollTo(0,9999);

Relaterte artikler