Scroll up

Status
Niet open voor verdere reacties.
K

klukkluk007

Gebruiker
Lid geworden
27 mrt 2008
Berichten
5
Hallo. Kan iemand voor mij dit script zo aanpasen dat hij naar boven scrold op de zelfde manier dat deze naar beneden scrold. Ben al met minnetjes aan de gang geweest, maar zonder resultaat. Het mooie aan dit script is dat ie echt scrold(met 1 druk op de "button") en niet gewoon naar beneden springt. De l die tussen die haakjes staan, zijn in het script de hoofdletter i.
------------------------------------------------------------------------------
Voorbeeld: * = dus de hoofdletter i

function scrollit(){
>for (*=1; *<500; *++({
parent.scroll(1,*)
}
enz.
-------------------------------------------------------------------------------
Dit is het script:

<SCRIPT Language="JavaScript">
<!--
function scrollit(){
for (I=1; I<=500; I++){
parent.scroll(1,I)
}
}
//-->
</SCRIPT>

<form>
<input type=button value="Naar beneden" onClick="scrollit()">
</form>

Alvast hartelijk bedankt
 
Laatst bewerkt:
Ik vond deze.
Misschien kun je er iets mee.

HTML: 
<html>

<head>
<script type="text/javascript">
<!--
function toTop(id){
document.getElementById(id).scrollTop=0
}

defaultStep=1
step=defaultStep
function scrollDivDown(id){
document.getElementById(id).scrollTop+=step
timerDown=setTimeout("scrollDivDown('"+id+"')",10)
}

function scrollDivUp(id){
document.getElementById(id).scrollTop-=step
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}

function toBottom(id){
document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight
}

function toPoint(id){
document.getElementById(id).scrollTop=100
}
// -->
</script> 
</head>
<body bgcolor="#FFFFFF">


<a href="#null" onclick="toTop('div1')">Top</a> 
<a href="#null" onmousedown="scrollDivDown('div1')" onmouseup="clearTimeout(timerDown)">ScrollDown</a> 
<a href="#null" onmousedown="scrollDivUp('div1')" onmouseup="clearTimeout(timerUp)">Scroll Up</a>
<a href="#null" onclick="toBottom('div1')">Bottom</a> 
<a href="#null" onclick="toPoint('div1')">Point</a> 
<BR><BR>
<div id="div1" style="width:200px; height:300px; overflow:auto">
<b>LAYER CONTENTS</b>
<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT
<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT
<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT
<P>Some Text<P>SOME TEXT<P>Some Text<P>End
</div>

</body>
</html>
 
Hoi Pieter,

Bedankt voor je reactie, maar dit is niet helemaal de bedoeling. Het is de bedoeling dat de gehele pagina omhoog gaat. Het zelfde idee als je <Home> en <End> op je toetsenbord, maar met mijn scriptje gaat het scollend, zoals je het met je muis doet(en dan vloeiend) Met één enkele muisklik scrold ie dan automatisch omhoog en niet in één keer . Het <Top> en <Bottom> verhaal ken ik wel, maar ik wil dus ook scrollend weer omhoog. Ik dacht het scriptje een beetje aanpassen en klaar, maar zo eenvoudig is dat dus niet. Tenminste, voor zower mijn kennis gaat. We wachten rustig af!!! Thanks!!!
 
Laatst bewerkt:
Hoi klukkluk007,

Om vloeiend te sctollen heb je, volgens mij, ofwel een timeout in je functie nodig of iets waarbij je een knop of link, zoals in mijn voorbeeld, moet "vasthouden".

Ik heb nog wel een andere, waarbij de timeout gebruikt wordt, maar daarvan heb ik alleen het naar beneden gedeelte gebruikt en ik kan de rest niet meer vinden. :o

Ik heb hem gedeeltelijk weten te restaureren, maar soms moet je een paar keer klikken eer iets het doet.Kijk maar even.

HTML: 
<html>
<head>
<script type="text/javascript">
var timeout;
var y = 0;
var step = 4;

function start1(){
stop1();
if (y < 0){
y=0;
}

window.parent.scroll(0,y);
y=y + step;

timeout=setTimeout("start1()",5);
}

function start2(){
stop1();
if (y >=0 ){
window.parent.scroll(0,y);
y = y - step;
}
timeout=setTimeout("start2()",5);
}

function stop1(){
clearTimeout(timeout);
}

function top1(){
window.parent.scroll(0,0);

y=0;
}
 </script>
</head>
<body>
<br><br><br> <br><br><br>  <br><br><br>
<form>
<input type=button value="Naar beneden" onClick="start1();">
<br>
<input type=button value="Naar boven" onClick="start2();">
<br>
<input type=button value="Stop" onClick="start2();">
<br>
<input type=button value="In een keer naar de top" onClick="top1();">
<br>
</form>
<b>Bladvulling</b>
<br><br><br>
<img src="http://www.pieter-arntz.info/Smileys/runningcar.gif">
  <br><br><br>  <br><br><br>
<b>Einde bladvulling</b>


</body>

</body>
</html>

Je kunt met de step grootte en de milliseconds vertraging in de setTimeout opdrachten spelen om het beter naar je zin te maken.
 
Hoi,
Bijna goed, maar je begrijpt wel wat ik bedoel, maar dan zonder die stopknop. In mijn script zit geen time-out maar kun je aangeven hoeveel tikkies hij moet zakken. In mijn geval is dat 500, maar als je dat getal kleiner maakt gaat ie minder naar beneden. Scriptje zit inderdaad een klein storinkje in, maar het is wel wat ik bedoel. Misschien dat je het aan kunt passen(zonder stopknop), maar gewoon up &down, zonder poespas. Mijn eigen werkt perfekt, maar ik wil er ook graag ééntje voor up. Heb wel zoiets gevonden en die werkten met minnetjes, maar dat kan ik niet voormekaar krijgen. (Dat script scrolde niet).
'k Hou de moed derin.
BvD
PS. Leuk gifje overigens.
 
Ik vermoed dat deze te snel naar boven gaat voor je, maar het was wel de gemakkelijkste aanpassing van jouw script die ik kon bedenken.
In Opera ziet het er goed uit. IE vind ik iets minder.


HTML: 
<html>
<head>
<SCRIPT Language="JavaScript">
<!--
function scrollitdown(){
for (I=1; I<=500; I++){ 
parent.scroll(1,I) 
}
}
function scrollitup(){
var y=window.pageYOffset;
for (I=1; I<=500; I++){ 
parent.scroll(1,y-I)
}
}
//-->
</SCRIPT>
</head>
<body>
<br><br><br> <br><br><br>  <br><br><br>
<form>
<br><br><br>  <br><br><br>
<input type=button value="Naar beneden" onClick="scrollitdown()">
<br>
<input type=button value="Naar boven" onClick="scrollitup()">
<br>
<br>
<br>
<br>
</form>
<b>Bladvulling</b>
<br><br><br>
<img src="http://www.pieter-arntz.info/Smileys/runningcar.gif">
  <br><br><br>  <br><br><br>
<b>Einde bladvulling</b>
  <br><br><br>  <br><br><br>

</body>

</body>
</html>

Hopelijk vind je het wat. :)
 
Is dit iets? :)
PHP: 
<script type="text/javascript">
 // Egel 080328 ;)
 var timer   = 0;
 var amount  = 1; // pixels per keer
 var timeout = 5; // milliseconde tussen scrollen

 function slowScroll() {
  var mem = document.body.scrollTop;
  document.body.scrollTop += amount;
  if (document.body.scrollTop == mem) clearInterval(timer);
  };

 function startScroll(a) {
  amount = a;
  if (timer) clearInterval(timer);
  timer = setInterval('slowScroll()',timeout);
  };
</script>

<body>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 <input type="button" value="Omlaag" onclick="startScroll(+1)"><br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 <input type="button" value="Omhoog" onclick="startScroll(-1)"><br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
</body>
Het scrolled 200 pixels per seconde.

Als je de buttons in een (i)frame hebt staan dan roep je het met onclick="parent.startScroll(+1)" aan.


Vr.Gr. Egel.
 
OKdan Egel, dit is wat ik bedoel. Hartstikke bedankt. Heb hem een beetje aangepast en staat inmiddels op de site. Pieter, jij ook bedankt voor de moeite!! Misschien tot een andere keer.

Gr. Klukkluk007
 
Graag gedaan! :)

Ik heb het nog iets verbeterd, in het vorige script maakte het niet uit wat je bij var amount = 1; invulde, de pixels per keer werden bepaald door de 1 in startScroll(+1) :o

Deze werkt met een aparte amount en direction:
PHP: 
<script type="text/javascript">
 // Egel 080402 ;)
 var amount  =  2; // pixels per keer
 var timeout = 10; // milliseconde tussen scrollen

 var timer = 0, direction = 1;
 function slowScroll() {
  var mem = document.body.scrollTop;
  document.body.scrollTop = mem + direction * amount;
  if (document.body.scrollTop == mem) clearInterval(timer);
  };
 function startScroll(d) {
  direction = d;
  if (timer) clearInterval(timer);
  timer = setInterval('slowScroll()',timeout);
  };
</script>

<body>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 <input type="button" value="Omlaag" onclick="startScroll(+1)"><br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
 <input type="button" value="Omhoog" onclick="startScroll(-1)"><br><br>
 *** <br><br> *** <br><br> *** <br><br> *** <br><br>
</body>
Vr.Gr. Egel.
 
Hoi Egel,
Had ik door en heb het dus daar aangepast. Werkt perfekt. Nogmaals bedankt. :thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan