www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help: Changing the scroll speed of this smooth scroll javascript

  1. #1
    Join Date
    Feb 2006
    Posts
    6

    Help: Changing the scroll speed of this smooth scroll javascript

    Hi everyone,

    I found a smoothscroll javascript from this website:
    http://www.dezinerfolio.com/2007/08/...-smooth-scroll

    I love it because it is a very lightweight javascript.
    However, I have absolutely no idea how to change the scroll speed.
    I tried everything that I know (which is not much) to change the code, but nothing seems to change anything.

    Any help would be great.
    You can download the javascript from the website, it comes in a folder that contains the js and an example html.


    This is the code for a preview:

    Code:
    /*--------------------------------------------------------------------------
     *  Smooth Scroller Script, version 1.0.1
     *  (c) 2007 Dezinerfolio Inc. <midart@gmail.com>
     *
     *  For details, please check the website : http://dezinerfolio.com/
     *
    /*--------------------------------------------------------------------------*/
    
    Scroller = {
    	// control the speed of the scroller.
    	// dont change it here directly, please use Scroller.speed=50;
    	speed:10,
    
    	// returns the Y position of the div
    	gy: function (d) {
    		gy = d.offsetTop
    		if (d.offsetParent) while (d = d.offsetParent) gy += d.offsetTop
    		return gy
    	},
    
    	// returns the current scroll position
    	scrollTop: function (){
    		body=document.body
    	    d=document.documentElement
    	    if (body && body.scrollTop) return body.scrollTop
    	    if (d && d.scrollTop) return d.scrollTop
    	    if (window.pageYOffset) return window.pageYOffset
    	    return 0
    	},
    
    	// attach an event for an element
    	// (element, type, function)
    	add: function(event, body, d) {
    	    if (event.addEventListener) return event.addEventListener(body, d,false)
    	    if (event.attachEvent) return event.attachEvent('on'+body, d)
    	},
    
    	// kill an event of an element
    	end: function(e){
    		if (window.event) {
    			window.event.cancelBubble = true
    			window.event.returnValue = false
          		return;
        	}
    	    if (e.preventDefault && e.stopPropagation) {
    	      e.preventDefault()
    	      e.stopPropagation()
    	    }
    	},
    	
    	// move the scroll bar to the particular div.
    	scroll: function(d){
    		i = window.innerHeight || document.documentElement.clientHeight;
    		h=document.body.scrollHeight;
    		a = Scroller.scrollTop()
    		if(d>a)
    			if(h-d>i)
    				a+=Math.ceil((d-a)/Scroller.speed)
    			else
    				a+=Math.ceil((d-a-(h-d))/Scroller.speed)
    		else
    			a = a+(d-a)/Scroller.speed;
    		window.scrollTo(0,a)
    	  	if(a==d || Scroller.offsetTop==a)clearInterval(Scroller.interval)
    	  	Scroller.offsetTop=a
    	},
    	// initializer that adds the renderer to the onload function of the window
    	init: function(){
    		Scroller.add(window,'load', Scroller.render)
    	},
    
    	// this method extracts all the anchors and validates then as # and attaches the events.
    	render: function(){
    		a = document.getElementsByTagName('a');
    		Scroller.end(this);
    		window.onscroll
    	    for (i=0;i<a.length;i++) {
    	      l = a[i];
    	      if(l.href && l.href.indexOf('#') != -1 && ((l.pathname==location.pathname) || ('/'+l.pathname==location.pathname)) ){
    	      	Scroller.add(l,'click',Scroller.end)
    	      		l.onclick = function(){
    	      			Scroller.end(this);
    		        	l=this.hash.substr(1);
    		        	 a = document.getElementsByTagName('a');
    				     for (i=0;i<a.length;i++) {
    				     	if(a[i].name == l){
    				     		clearInterval(Scroller.interval);
    				     		Scroller.interval=setInterval('Scroller.scroll('+Scroller.gy(a[i])+')',10);
    						}
    					}
    				}
    	      	}
    		}
    	}
    }
    // invoke the initializer of the scroller
    Scroller.init();
    
    
    /*------------------------------------------------------------
     *						END OF CODE
    /*-----------------------------------------------------------*/
    I have tried changing a bunch of numbers and tried using Scroller.speed, but nothing seems to work.

    The solution is probably very simple, but I am very inexperienced with coding.

    Thank you.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    // invoke the initializer of the scroller
    Scroller.init();
    Scroller.speed=50;

  3. #3
    Join Date
    Feb 2006
    Posts
    6
    yeah that was the first thing I tried, but it didn't do anything. Changing the 50 doesn't do anything either.

    Did you get it to work from their example html?

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Yes

  5. #5
    Join Date
    Feb 2006
    Posts
    6

    That's very weird because adding that line to the js does absolutely nothing for me, the speed remains very very similar...

    Is that all you did? By using 50, did the scroll get slower?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles