Wie scrollt man automatisch nach unten und scrollt nach oben, wenn unten

Für ein Projekt muss ich alle 7 Sekunden ein wenig weiter unten auf der Seite scrollen, und wenn es den Boden erreicht, scrollt es zurück. Und das immer und immer wieder.Wie scrollt man automatisch nach unten und scrollt nach oben, wenn unten

Ich habe es so weit gemacht, dass es alle 7 Sekunden nach unten scrollt. Ich habe versucht wie 20 Optionen, um nach oben zu scrollen, wenn es den Boden berührt, aber keiner von ihnen hat funktioniert.

Mein Code:

<head><link href="http://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet" type="text/css"><link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css"/><link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/><link href="css/animate.css" rel="stylesheet"><link href="vendor/swiper/css/swiper.min.css" rel="stylesheet" type="text/css"/> 
     <link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css"/> 
     <link href="css/layout.min.css" rel="stylesheet" type="text/css"/> 
     <link rel="shortcut icon" href="roostersb.png"/> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
     <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
     <link href="css/custom.css" rel="stylesheet" type="text/css"/> 
<style> 
.klok{ 
    position: fixed; 
    color: white; 
    right: 18%; 
    top: 7%; 
} 

h2.klok{ 
    position: fixed; 
    color: white; 
    right: 2%; 
    text-transform: capitalize; 
    top: 0,5%; 
} 

.timer{ 
    bottom: 2%; 
    right: 2%; 
    position: fixed; 
    color: black; 
} 


.tr{ 
    font-size: 150%; 
} 

h1.kaaart{ 
    color: white; 
    font-weight: bold; 
    top: 11%; 
    right: 2%; 
} 


.kaaart{ 
    background-color: #f2f2f2; 
    /*-webkit-border-radius: 10px;*/ 
    /*-moz-border-radius: 10px;*/ 
    /*border-radius: 10px;*/ 
    box-shadow: 0 0 17px #414243; 
    -webkit-box-shadow: 0 0 17px #414243; 
    -moz-box-shadow: 0 0 17px #414243; 
    text-align: center; 
    /*horizontal-align: middle;*/ 
    text-transform: capitalize; 
} 


.mijntafel{ 
    font-size: 160%; 
} 

.mijntafeltop{ 
    font-size: 180%; 
} 

th.mijntafeltop{ 
    font-size: 170%; 
} 

.corvee{ 
    font: italic bold; 
    font-size: 180%; 
    color: #333333; 
} 

h4.corvee{ 
    font: italic bold; 
    font-size: 180%; 
    color: #333333; 
    font-weight: bold; 
} 


.afwezig{ 
    font: italic bold; 
    font-size: 180%; 
    color: #333333; 
} 

h4.afwezig{ 
    font: italic bold; 
    font-size: 180%; 
    color: #333333; 
    font-weight: bold; 
} 

.ziek{ 
    font: italic bold; 
    font-size: 180%; 
    color: #333333; 
} 

h4.ziek{ 
    font: italic bold; 
    font-size: 180%; 
    color: #333333; 
    font-weight: bold; 
} 

.extra{ 
    font: italic bold; 
    font-size: 180%; 
    color: #333333; 
} 

h4.extra{ 
    font: italic bold; 
    font-size: 180%; 
    color: #333333; 
    font-weight: bold; 
} 

h4.mededeling{ 
    font: bold; 
    text-decoration: underline; 
    font-size: 180%; 
    color: #333333; 
} 

.mededeling{ 
    font-size: 150%; 
    color: #333333; 
} 

</style> 
</head> 
<script> 
/*window.onscroll = function(ev) { 
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { 
     (function smoothscroll(){ 
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop; 
    if (currentScroll > 0) { 
     window.requestAnimationFrame(smoothscroll); 
     window.scrollTo (0,currentScroll - (currentScroll/5)); 
    } 
})(); 
    } 
};*/ 

/*window.onscroll = function() { 
    var d = document.documentElement; 
    var offset = d.scrollTop + window.innerHeight; 
    var height = d.offsetHeight; 

    console.log('offset = ' + offset); 
    console.log('height = ' + height); 

    if (offset === height) { 
     alert("At the bottom") 
    } 
};*/ 


window.onscroll = function(ev) { 
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { 
     alert("you're at the bottom of the page"); 
    } 
}; 


function countdown() { 
    var count = 8; 
    var timerId = setInterval(
     function() { 
     count--; 
     console.log(count); 
     document.getElementById("timer").innerHTML = count; 
     if(count == 0) { 
      count = 8; 
     window.scrollBy(0, 685);   
     } 
     if(count == 1) { 


     } 
     if(count == 2) { 


     } 
    }, 1000); 
} 


countdown(); 
</script> 


<body onload="doRedirect(); show5(); pie();" cz-shortcut-listen="true"> 

<?php 
$datum = date("d-m-Y"); 

$url = 'http://rooster.kajmunk.nl/wijzigingen/18-12-2017'; 

$urlmed = 'http://rooster.kajmunk.nl/mededelingen/18-12-2017'; 

$urlhtml = file_get_contents($url); 

$urlhtmlmooi = strstr($urlhtml, '<table'); 

$urlhtmlmooi1 = str_replace('<thead><tr><th width="15%">Klas</th><th width="20%">Uur</th><th width="33%">Nieuwe situatie</th><th width="33%">Oude situatie</th></tr></thead>','',$urlhtmlmooi); 

$urlhtmlmooi2 = str_replace('<tr class="','<tr class="tr ',$urlhtmlmooi1); 

$urlhtmlsupermooi = str_replace("roosterwijzigingen","centered striped mijntafel",$urlhtmlmooi2); 


$urlmedhtml = file_get_contents($urlmed); 

$urlmedhtmlmooi = strstr($urlmedhtml, '<div class="content"'); 

$urlmedhtmlsupermooi1 = str_replace(' class="content"',"",$urlmedhtmlmooi); 

$urlmedhtmlsupermooi2 = str_replace('<h1>','<h1 class="extra">',$urlmedhtmlsupermooi1); 

//$urlmedhtmlsupermooi2 = str_replace(' class="mededeling"',"",$urlmedhtmlsupermooi1); 

$urlmedhtmlsupermooi = str_replace('h1','h4',$urlmedhtmlsupermooi2); 

//$tussendoor1 = str_replace(' class="ziek"',"",$urlmedhtmlmooi1); 

//$tussendoor2 = str_replace(' class="corvee"',"",$tussendoor1); 

//$urlmedhtmlsupermooi = str_replace(' class="afwezig"',"",$tussendoor2); 



?> 
    <h2 id="timer" class="timer">timer...</h2> 
    <div style="width:74%; position:fixed; float: left"><table class="mijntafeltop white centered striped"><thead><tr class="mijntafeltop"><th width="15%">Klas</th><th width="20%">Uur</th><th width="33%">Nieuwe situatie</th><th width="33%">Oude situatie</th></tr></thead></table></div> 
    <div style="width:74%; top: 1%; float: left"><?php echo $urlhtmlsupermooi;?></div> 
    <div class="card-panel teal darken kaaart klok" style="width:24%; height:16%; right: 1%; top: 2%; position:fixed;"></div> 

<script src="js/liveclock.js" language="JavaScript"> 
</script> 




<div class="klok" id="liveclock"><i class="large material-icons">school</i><h2>Uur kapot<br>Klok kapot</h2></div> 
</div> 
</div> 
<div id="spacing"></div> 
<div id="wrapper"> 
<div id="content" class=""> 
<script>var duration = 0;</script> 

<script language="JavaScript"> 
duration = 7000 
var sTargetURL = "" 
    function doRedirect() { 
    setTimeout("timedRedirect()", 7000); 
    } 
    function timedRedirect() { 
    } 
    $('body').keyup(function (event) { 
    if (event.keyCode == 37) { 
    } 

    else if (event.keyCode == 39) { 
    } 
    }); 

</script> 
</div> 
</div> 

    <script type="text/javascript"> 

     var timer; 
     var timerCurrent; 
     var timerFinish; 
     var timerSeconds; 

     function drawTimer(percent) 
     { 
     var html = '<div id="slice"'+(percent > 50?' class="gt50"':'') 
      + '><div class="pie"></div>' + (percent > 50 ?'<div class="pie fill"></div>' : '') + '</div>'; 
     $('div.timer').html(html); 
     var deg = 360/100*percent; 
     $('#slice .pie').css({ 
      '-moz-transform':'rotate('+deg+'deg)', 
      '-webkit-transform':'rotate('+deg+'deg)', 
      '-o-transform':'rotate('+deg+'deg)', 
      'transform':'rotate('+deg+'deg)' 
     }); 
     } 

     function stopWatch() 
     { 
     var seconds = (timerFinish-(new Date().getTime()))/1000; 
     if (seconds <= 0) 
     { 
      drawTimer(100); 
      clearInterval(timer); 
      $('input[type=button]#watch').val('Start'); 
      /* alert('Finished counting down from '+timerSeconds); */ 
     } else { 
      var percent = 100-((seconds/timerSeconds)*100); 
      drawTimer(percent); 
     } 
     } 

     function pie() 
     { 
     console.log(duration); 
     timerSeconds = duration/1000; 
     timerCurrent = 0; 
     timerFinish = new Date().getTime()+(timerSeconds*1000); 
     timer = setInterval('stopWatch()',50); 
     }; 

     $(document).ready(function() { 
     $.post("http://localhost", { timestamp : $.now() }); 
     }); 
    </script></div> 
    <div class="card-panel white kaaart" style="width:24%; height:65%; right: 1%; top: 20%; position:fixed;"><?php echo $urlmedhtmlsupermooi; ?></div> 



</body> 
<button id="button" style="display: none;" onclick="scrollWin()">Scroll down</button>

Mit seiner jetzt mag: https://sj3rd.nl/schermen.php

Quelle

2017-12-16 Sj3rd

könnten Sie bitte die Funktion, um die Seite zu Ihrem Beitrag hinzufügen scrollt? –

Mein Beitrag? Ich bekomme es nicht – Sj3rd

sorry, schlechte Grammatik :) Bitte bearbeiten Sie Ihre Frage und fügen Sie die Funktion hinzu (der ganze Code ist zu verwirrend für mich) –

dies sollte funktionieren:

function countdown() { 
var count = 8; 
var timerId = setInterval(
    function() { 
    count--; 
    console.log(count); 
    document.getElementById("timer").innerHTML = count; 
    if(count == 0) { 
     count = 8; 
     if (document.documentElement.scrollTop >= document.documentElement.scrollHeight - document.documentElement.offsetHeight) { 
      window.scrollTo(0, 0); 
     } 
     else { 
      window.scrollBy(0, 685); 
     } 


    } 
    if(count == 1) { 


    } 
    if(count == 2) { 


    } 
}, 1000); 
}

Quelle

2017-12-16 16:06:52

Wie scrollt man automatisch nach unten und scrollt nach oben, wenn unten

Antwort

Verwandte Themen