Skip to content Skip to sidebar Skip to footer

Scroll A Page Using Javascript

I'm using Ender.js and I am trying to get the page to scroll to a specific position. I think I'm doing something wrong here, but page doesn't even move. Ideally I would have liked

Solution 1:

We just rolled out a new version of our web site last week, with a Javascript scrolling. You can see it live at http://beebole.com but I've extracted the code for a basic example below:

<htmllang="en"><head><title>BeeBole - Simple and Fast Timesheets</title><style>body{ padding:01em; margin:0;}
      ul{ padding:0;margin:0;}
      li{ list-style:none; float:left; margin:01em;}
      h1{ clear:both;}
    </style></head><body><aid="home"name="home"></a><divclass="header"><ulclass="menu"><li><aclass="fr current"href="#home"onclick="return beebole.scrollTo(this)">Home</a><li><aclass="fr"href="#pricing"onclick="return beebole.scrollTo(this)">Pricing</a><li><aclass="fr"href="#tour"onclick="return beebole.scrollTo(this)">Tour</a></ul></div><divclass="chapter home"><h1>Home</h1><p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p></div><aid="pricing"name="pricing"></a><divclass="header"><ulclass="menu"><li><aclass="fr"href="#home"onclick="return beebole.scrollTo(this)">Home</a><li><aclass="current fr"href="#pricing"onclick="return beebole.scrollTo(this)">Pricing</a><li><aclass="fr"href="#tour"onclick="return beebole.scrollTo(this)">Tour</a></ul></div><divclass="chapter pricing"><h1>Pricing</h1><p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p><p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p></div><aid="tour"name="tour"></a><divclass="header"><ulclass="menu"><li><aclass="fr"href="#home"onclick="return beebole.scrollTo(this)">Home</a><li><aclass="fr"href="#pricing"onclick="return beebole.scrollTo(this)">Pricing</a><li><aclass="current fr"href="#tour"onclick="return beebole.scrollTo(this)">Tour</a></ul></div><divclass="chapter tour"><h1>Take a tour</h1><p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p><p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p><p>Lorem ipsum dolor sit ... in feugiat massa congue in.</p></div><script>
    (function(){
        window.beebole = {
            getPos: function( elm ){
                var x = 0, y = 0;
                while( elm != null ) {
                    x += elm.offsetLeft;
                    y += elm.offsetTop;
                    elm = elm.offsetParent ;
                }
                return {x:x, y:y};
            },
            damper:function(rfnAction, rfnDone, duration){
                var interval,
                    startTime = newDate().getTime();

                interval = setInterval( function(){
                    var pos, 
                        t,
                        now = newDate().getTime();

                    t = now - startTime;
                    if(t >= duration){
                        clearInterval(interval);
                        rfnDone.call(beebole);
                    }else{
                        t = 2 * t / duration;
                        if (t < 1) {
                            pos = 0.5*t*t*t*t;
                        }else{
                            t -= 2;
                            pos = -0.5 * (t*t*t*t - 2);
                        }                       
                        rfnAction.call(beebole, pos);
                    }
                }, 15 );
            },
            scrollTo: function( a ){
                try{
                    var endName = a.href.split('#')[1],
                        endElm = document.getElementById(endName),
                        start = isNaN(window.pageYOffset) ? 
                            document.documentElement.scrollTop :
                            window.pageYOffset,
                        end = beebole.getPos(endElm).y,
                        length = beebole.getPos(endElm).y - start;

                    this.damper(function(pos){
                        //when movingwindow.scrollTo(0, start + length * pos);
                    }, function(){
                        //when donewindow.location.hash = endName;
                    },
                    //durationMath.max( Math.abs( Math.round(length / 3) ), 1200));
                    returnfalse;
                }catch(e){
                    returntrue;
                }
            }
        };
    })();

    </script></body></html>

Either add more content where the lorem ipsum are. Or make the browser window very small to have a scroll.

Click the links to see the page move.

If the browser has Javascript off, the browser will take in charge the scroll using the default # key. But obviously without the damper effect. It was not tested on IE6 and IE7.

Post a Comment for "Scroll A Page Using Javascript"