[javascript] smooth scroll, springt eerst naarboven

[Verwijderd]

Beste mensen,
Ik heb een smooth scroll zo aangepast dat ik het ook met iframes kan laten werken.
In het hoofdvenster klik je op een link, waarna het binnen het iframe naar het juiste anchor scrollt. Dit werkt bijna perfect. Echter, in een flits zie je bovenkant van de pagina, waarna de pagina van het juiste punt naar het andere juiste punt scrollt.

Wellicht dat iemand van jullie zo het probleem ziet.
Je kunt script werkend zien op de volgende site: www.roemervandersteeg.nl/test.php

code:

    <script type="text/javascript">
    //<![CDATA[
    
    
    var scrollInt;
    var scrTime, scrSt, scrDist, scrDur, scrInt;

    function replaceAnchorLinks()
    {
        var anchors, i, targ, targarr;
    
        if (!document.getElementById)
            return;
        
        // get all anchors
        anchors = document.getElementsByTagName("a");
        for (i=0;i<anchors.length;i++)
        {
        
            // get name of target anchor
            targ = anchors[i].href.substring( anchors[i].href.indexOf("#")+1 );
            
            // find target anchor
            targarr = parent.iframe.document.getElementsByName( targ );
            
            if (targarr.length)
            {

                anchors[i].className = (targarr[0].offsetTop < anchors[i].offsetTop) ? "up" : "down";
                anchors[i].id = "__" + targ;    // save target as id with prefix (used in onclick function below)
                anchors[i].onmousedown = function () { scrollToAnchor( this.id.substring( 2 ) ); return false; };
                anchors[i].href = "iframe.php#";            // rewrite href
            }
        
            
        }
    }
    
    
    /*
    SCROLL FUNCTIONS
    */
    
    
    
    
    function scrollPage()
    {
        scrTime += scrInt;
        if (scrTime < scrDur) {
            window.iframe.scrollTo( 0, easeInOut(scrTime,scrSt,scrDist,scrDur) );
        }else{
            window.iframe.scrollTo( 0, scrSt+scrDist );
            clearInterval(scrollInt);
        }
    }
    
    function scrollToAnchor(aname)
    {
        var anchors, i, ele;
    
        if (!document.getElementById)
            return;
        
        // get anchor
        anchors = iframe.document.getElementsByTagName("a");
        for (i=0;i<anchors.length;i++) {
            if (anchors[i].name == aname) {
                ele = anchors[i];
                i = anchors.length;
            }
        }
        
        // set scroll target
        if (window.iframe.scrollY)
            scrSt = window.iframe.scrollY;
        else if (iframe.document.documentElement.scrollTop)
            scrSt = iframe.document.documentElement.scrollTop;
        else
            scrSt = iframe.document.body.scrollTop;
        
        scrDist = ele.offsetTop - scrSt;

        scrDur = 1000;
        scrTime = 0;
        scrInt = 10;
        // set interval
        clearInterval(scrollInt);
        scrollInt = setInterval( scrollPage, scrInt );
    }
    
    
    
    
    /*
    EASING FUNCTIONS
    */
    
    function easeInOut(t,b,c,d)
    {
        return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;
    }
    
    
    
    
    
    //]]>
    </script>

[Michali]

Ik weet bijna zeker dat het hier door komt (regel 32):

JavaScript:

anchors[i].href = "iframe.php#";

Dit zorgt ervoor dat de pagina eerst naar boven springt.

Beter is om er dan dit van te maken:

JavaScript:

anchors[i].href = "javascript:void(0)";

Mocht ik er toch naast zitten, probeer dan eens de return waarde van easeInOut op te vangen en deze uit te lezen. Er zou mogelijk iets in je berekening mis kunnen gaan waardoor de eerste waarde 0 is (hoewel me dat wel onwaarschijnlijk lijkt, voor zover ik kan zien).

[b19a]

Tevens: je scrollfunctie werkt niet goed in Opera (9.23), de pagina scrollt elke keer terug naar de bovenkant.

[Verwijderd]

Michali schreef op maandag 27 augustus 2007 @ 17:37:
Ik weet bijna zeker dat het hier door komt (regel 32):

JavaScript:

anchors[i].href = "iframe.php#";

Dit zorgt ervoor dat de pagina eerst naar boven springt.

Beter is om er dan dit van te maken:

JavaScript:

anchors[i].href = "javascript:void(0)";

Mocht ik er toch naast zitten, probeer dan eens de return waarde van easeInOut op te vangen en deze uit te lezen. Er zou mogelijk iets in je berekening mis kunnen gaan waardoor de eerste waarde 0 is (hoewel me dat wel onwaarschijnlijk lijkt, voor zover ik kan zien).

Kijk, dit was de oplossing. Enorm bedankt!
En dat het in Opera niet super werkt, daar maak ik me niet al te druk om. Zijn doelgroep surft vast niet met Opera. Maar iig bedankt voor de opmerking.

[ Voor 4% gewijzigd door Verwijderd op 03-09-2007 11:51 ]