Javascript, um eine Webseite zu scrollen, langsam scrollen, warten, zurück nach oben

Ich brauche ein Javascript auf einer Webseite, die ich in einem lokalen Quiz anzeigen möchte. Die Seite zeigt die Punktetabelle, aber mit 60 Teams kann ich nicht alle auf einmal zeigen. Also möchte ich der Seite, die langsam nach unten scrollt, ein Javascript hinzufügen, und wenn die Seite unten ist, sollte sie 2 Sekunden warten, dann zurück zur Seite springen und wieder runterscrollen.Javascript, um eine Webseite zu scrollen, langsam scrollen, warten, zurück nach oben

Bei https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_scrollto verwendete ich dieses Skript:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
body { 
 
    width: 500px; 
 
} 
 
</style> 
 
</head> 
 
<body onLoad="pageScroll()"> 
 

 
<h1>Scores</h1> 
 

 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 

 
<script> 
 

 
function pageScroll() { 
 
    \t window.scrollBy(0,10); // horizontal and vertical scroll increments 
 
    \t scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds 
 
      if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) { 
 
     \t \t scrolldelay = setTimeout('PageUp()',2000); 
 
    \t \t } 
 

 
} 
 

 
function PageUp() { 
 
\t window.scrollTo(0, 0); 
 
} 
 

 
</script> 
 

 
</body> 
 
</html>

Die Scroll-Geschwindigkeit geändert wird, dies zu schnell ist, sondern nur zum Testen. Das Skript scheint den Job zu machen, aber wenn man zum Anfang der Seite springt, gibt es einige "Hickups", bevor man wieder runterscrollt. Kann mir bitte jemand sagen, was los ist?

Quelle

2017-03-03 Joep Demey

Versuchen Sie dies - löschen Sie die erste Timeout und rufen Sie dann die pageScroll Funktion nach der Rückkehr an die Spitze.

function pageScroll() { 
 
    window.scrollBy(0, 10); // horizontal and vertical scroll increments 
 
    scrolldelay = setTimeout('pageScroll()', 100); // scrolls every 100 milliseconds 
 
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) { 
 
    clearTimeout(scrolldelay); 
 
    scrolldelay = setTimeout('PageUp()', 2000); 
 
    } 
 

 
} 
 

 
function PageUp() { 
 
    window.scrollTo(0, 0); 
 
    setTimeout(function() { 
 
    pageScroll() 
 
    }, 600); 
 
}

body { 
 
    width: 500px; 
 
}

<body onLoad="pageScroll()"> 
 

 
    <h1>Scores</h1> 
 

 
    test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test 
 
    test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test 
 
    test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br> test test test <br>

Quelle

2017-03-03 10:55:55 sideroxylon

Vielen Dank, das funktioniert gut –

Sie das Intervall speichern aus, so können Sie jedes Mal gelöscht werden kann, und setInterval stattdessen für Anrufe zu wiederholen.

var scrolldelay; 
 

 
function pageScroll() { 
 
    window.scrollBy(0,10); // horizontal and vertical scroll increments 
 
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {  
 
     setTimeout('PageUp()',2000); 
 
    } 
 
} 
 

 
function PageUp() { 
 
    clearInterval(scrolldelay) 
 
    window.scrollTo(0, 0); 
 
    scrolldelay = setInterval('pageScroll()',100); 
 
} 
 

 
scrolldelay = setInterval('pageScroll()',100); // scrolls every 100 milliseconds

<h1>Scores</h1> 
 

 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br> 
 
test test test <br>

Quelle

2017-03-03 10:58:24 G0dsquad

Javascript, um eine Webseite zu scrollen, langsam scrollen, warten, zurück nach oben

Antwort

Verwandte Themen