Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to scroll down page smoothly onLoad?

    Hi, I want to make my page smoothly scroll down to a specific anchor or position on the page. I have found a script that when pressing a <a href="#test"> with anchor in the name it smoothly scrolls to it.

    I wonder if someone can help me modify this script to: Scroll to my defined anchor/position on the load instead of onclick.

    And I see in the comments of the code there is a method that extracts all the anchors and validates them as # and attaches the events.
    I dont think that need to be done if I can write what anchor it should go to.

    I am not so good at this, so any help would be appreciated. Thanks!

    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 300
    	},
    
    	// 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
    /*-----------------------------------------------------------*/

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by d0ri0 View Post
    Hi, I want to make my page smoothly scroll down to a specific anchor ........on the load instead of onclick.
    Try SoftScroll. The instructions show you how to configure it to do that.

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! That script worked like i wanted.


  •  

    Posting Permissions

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