自動的に下にスクロールする方法、下にある場合は上にスクロールする方法

プロジェクトの場合は、さらに7秒ごとにページを下にスクロールする必要があり、下に達するとスクロールして元に戻します。そしてそれは何度も繰り返します。自動的に下にスクロールする方法、下にある場合は上にスクロールする方法

これまでに7秒ごとにスクロールするようにしました。私はそれが底に触れるならば、トップにスクロールするための20のオプションのようにしようとしましたが、それらのどれも働いていませんでした。

マイコード：付き

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

その今好き：https://sj3rd.nl/schermen.php

出典

2017-12-16 Sj3rd

あなたはあなたのポストにページをスクロールする機能を追加してくださいだろうか？ –

私のポスト？私はそれを得ない – Sj3rd

申し訳ありませんが、悪い文法:)あなたの質問を編集してください（全体のコードは私のために混乱している） –

これは動作するはずです：

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

出典

2017-12-16 16:06:52

自動的に下にスクロールする方法、下にある場合は上にスクロールする方法

答えて

関連する問題