[javascript] verticaal scrollen met scrollTo() werkt niet.

[Predje]

Hey Allemaal.

Lang geleden eens een website gemaakt met een horizontale scrollbalk.
Je kon dan naar de paginas scrollen dmv textlinks met daaronder javascript.
De code die ik toen gebruikte animeerde het scrollen ook, maar deze code was bugged (scherm ging trillen bij te grote browsers).

Nu ben ik deze code opnieuw aan het maken en heb het scrollTo() DOM element gevonden.
ScrollTo is natuurlijk makkelijker dan ScrollBy, omdat je dan als je weer terug wil (naar links) niet met negatieve waarde hoeft te werken.

Probleem is nu dat het wel naar de positie gaat (1 beweging, niet geanimeerd), maar in dezelfde seconden ook weer terug is.

link:

code:

<a href="#" onclick="scrollToPos(1460)">Link</a>

Javascript

code:

function scrollToPos(pos) {
    window.scrollTo(pos,0)
}

Hij gaat dus wel 1 flits naar 1460 en direct weer naar 0.
(de 0 in de functie is voor de y pos, die heeft niet te scrollen, toch?)

Iemand die hulp kan bieden?

[Snake]

Kun je niet beter ergens

HTML:

<a name="iets"></a>

invoegen, en ernaartoe scrollen met

HTML:

<a href="#iets">scrollerdescroll</a>

Want pixels zijn niet op ieder scherm even groot (iemand heeft misschien een groter lettertype oid)

Daar heeft mij voorbeeld geen last van

[Predje]

Snakiej schreef op woensdag 14 maart 2007 @ 12:07:
Kun je niet beter ergens

HTML:

<a name="iets"></a>

invoegen, en ernaartoe scrollen met

HTML:

<a href="#iets">scrollerdescroll</a>

Want pixels zijn niet op ieder scherm even groot (iemand heeft misschien een groter lettertype oid)

Daar heeft mij voorbeeld geen last van

Dat werkt toch alleen verticaal? (boven/beneden).
En pixels zijn toch echt op elk scherm gelijk hoor.
Hoe kun je anders alles uitlijnen op pixel met CSS?

[RobIII]

Waar hoort mijn topic?

[PRG] >> [WEB]

[ Voor 36% gewijzigd door RobIII op 14-03-2007 12:48 ]

[André]

Ik denk eerder dat het te maken heeft met het gebruik van "#" als href. Zet in de onclick aan het einde eens een return false

[sig69]

Predje schreef op woensdag 14 maart 2007 @ 12:38:
[...]

Dat werkt toch alleen verticaal? (boven/beneden).

Kijk eens naar je topic titel?
En ook nog:

Lang geleden eens een website gemaakt met een verticale scrollbalk.

Wil je nu horizontaal of verticaal scrollen?

[ Voor 26% gewijzigd door sig69 op 14-03-2007 12:54 ]

[Predje]

sig69 schreef op woensdag 14 maart 2007 @ 12:52:
[...]

Kijk eens naar je topic titel?
En ook nog:

[...]

Wil je nu horizontaal of verticaal scrollen?

klopt mijn fout! sorry

[Predje]

André schreef op woensdag 14 maart 2007 @ 12:52:
Ik denk eerder dat het te maken heeft met het gebruik van "#" als href. Zet in de onclick aan het einde eens een return false

10 punten voor de winnaar! thx!

[Predje]

En voor de geintresseerde, ik heb de functie was uitgebreid zodat hij smoothscrolled.

JavaScript:

function scrollToPos(pos) {
    var CurPos = window.pageXOffset;
    //IE compat
    if (typeof(CurPos)!='number')
    {
        CurPos = document.body.scrollLeft;
    }

    var GotoPos = pos;
    var Speed = 12;

    //naar links
    if(CurPos >= GotoPos){
        while(CurPos >= GotoPos){
            CurPos = (CurPos - Speed);
            window.scrollTo(CurPos,0);
        }   
    //naar rechts
    }else{
        while(CurPos <= GotoPos){
            CurPos = (CurPos + Speed);
            window.scrollTo(CurPos,0);
        }   
    }
}

Je kan code ook tussen [code=js][/] tags plaatsen

[ Voor 5% gewijzigd door BtM909 op 14-03-2007 15:21 ]

[IntToStr]

Kun je zo niet maximaal 11 pixels te ver doorschieten?

Ik weet niet of dit een probleem is, maar misschien wil je iets inbouwen als (regel 15):

code:

CurPos = max(CurPos - Speed, pos);

[Predje]

IntToStr schreef op woensdag 14 maart 2007 @ 15:13:
Kun je zo niet maximaal 11 pixels te ver doorschieten?

Ik weet niet of dit een probleem is, maar misschien wil je iets inbouwen als (regel 15):

code:

CurPos = max(CurPos - Speed, pos);

ja, je kunt idd iets "uitschieten".
Zal de code verrijken met je aanvulling thx

Bij nader inzien maakt die oplossing de code veel te traag (moet trouwens zijn Math.max()), dus ik laat het maar bij het oude.

[ Voor 14% gewijzigd door Predje op 14-03-2007 17:46 ]