javascript - Scrolla automatiskt till botten av sidan

Jag har en lista med frågor. När jag klickar på den första frågan, bör det automatiskt ta mig till ett specifikt element längst ner på sidan.

Hur kan jag göra detta med jQuery?

Svar #1

jQuery är inte nödvändigt. De flesta av de bästa resultaten jag fick från en Google-sökning gav mig detta svar:

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

Där du har nästlade element kanske dokumentet inte rullar. I detta fall behöver du rikta in dig på det element som rullar och använda dess rullhöjd istället.

nestedElement.scrollTo(0, nestedElement.scrollHeight);

Några ytterligare källor du kan titta 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

För att bläddra hela sidan till botten:

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

Du kan se demon här

För att scrolla ett specifikt element till botten:

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

Här är demonstrationen

Och så här fungerar det:

Ref: scrollTop, scrollHeight, clientHeight

UPPDATERING: De senaste versionerna av Chrome (61+) och Firefox stöder inte scrollning av body, se: https://dev.opera.com/articles/fixing-the-scrolltop-bug/

Svar #3

Vanilj-JS-implementation:

element.scrollIntoView(false);

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

Svar #4

Du kan använda detta för att gå ner på sidan i ett animformat.

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

Svar #5

en rad för att smidigt scrolla till botten

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

För att scrolla upp, ställ helt enkelt in top på 0

Svar #6

Nedan bör vara lösningen för alla webbläsare. Den har testats på Chrome, Firefox, Safari och IE11

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

window.scrollTo(0,document.body.scrollHeight); fungerar inte på Firefox, åtminstone för Firefox 37.0.2

Svar #7

Ibland sträcker sig sidan vid scrollning till botten (till exempel på sociala nätverk), för att scrolla ner till slutet (sidan's yttersta botten) använder jag detta skript:

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

Och om du är i webbläsarens JavaScript-konsol kan det vara användbart att kunna stoppa rullningen, så lägg till:

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

Och använd sedan stopScroll();.

Om du behöver scrolla till ett specifikt element, använd:

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

Eller universellt skript för automatisk rullning till ett specifikt element (eller stoppa sidrullningsintervall):

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

Endast CSS?!

Ett intressant alternativ endast med CSS:

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

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

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

Det är inte idiotsäkert, men jag har tyckt att det varit hjälpsamt i flera situationer.

Dokumentation: 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 också göra detta med animation, det är väldigt enkelt

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

hopp hjälper, tack

Svar #10

Du kan använda denna funktion var som helst där du behöver anropa den:

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

}

jquery.com: ScrollTo

Svar #11

Så många svar försökte räkna ut dokumentets höjd. Men det räknade inte korrekt för mig. Däremot fungerade båda dessa:

jquery

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

eller bara js

    window.scrollTo(0,9999);

Relaterade artiklar