Automatisch zum Ende der Seite blättern

Question

Ich habe eine Liste von Fragen. Wenn ich auf die erste Frage klicke, sollte sie mich automatisch zu einem bestimmten Element am unteren Rand der Seite führen.

Wie kann ich dies mit jQuery tun?

Answer 1

Unten sollte die browserübergreifende Lösung stehen. Sie wurde mit Chrome, Firefox, Safari und IE11 getestet

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

window.scrollTo(0,document.body.scrollHeight); funktioniert nicht in Firefox, zumindest nicht in Firefox 37.0.2

Answer 2

Nur CSS?!

Eine interessante Alternative, die nur CSS enthält:

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

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

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

Es ist nicht kugelsicher aber ich habe es in verschiedenen Situationen als hilfreich empfunden.

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>

Answer 3

Manchmal dehnt sich die Seite beim Scrollen nach unten aus (z.B. in sozialen Netzwerken), um bis zum Ende zu scrollen (ultimatives Ende der Seite) verwende ich dieses Skript:

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

Und wenn Sie in der Javascript-Konsole des Browsers sind, könnte es nützlich sein, das Scrollen zu stoppen, also fügen Sie hinzu:

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

Und dann verwenden Sie stopScroll(); .

Wenn Sie zu einem bestimmten Element blättern müssen, verwenden Sie:

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

Oder ein universelles Skript für den automatischen Bildlauf zu einem bestimmten Element (oder zum Anhalten des Bildlaufintervalls der Seite):

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);

Answer 4

Sie können dies auch mit Animation tun, es ist sehr einfach

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

Hoffnung hilft, Dankeschön

Answer 5

Sie können diese Funktion überall dort verwenden, wo Sie sie benötigen:

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

}

jquery.com: ScrollTo