Smooth Anchors

[juancile]

Hola amigos!.

Casi no teno idea de Javascript. Pero conseguí este codigo para mi web que me interesaba mucho y lo pude aplicar correctamente. El codigo permite crear anclas en el interior de una pagina y dirigirse a los mismos con efecto smooth (suave, deslizante, etc.).
Mi problema es que cuando se dirije a un ancla, no para donde yo lo coloco exactamente, sino mas arriba o mas abajo.
Y en diferentes navegadores como IE, Firefox, Chrome, Opera tiene distintos comportamientos, o sea hay variaciones en la forma de pararse.

Aqui esta el codigo:

Código:

// initializes the script
addLoadEvent(replaceAnchorLinks);

var scrollInt;
var scrTime, scrSt, scrDist, scrDur, scrInt;

// Found this script at http://blog.firetree.net/2005/07/04/javascript-find-position/
// Just used here to provide offsetTop functionality for IE
function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

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++)
	{
		// check if href links to an anchor on this page
		if ( anchors[i].href.indexOf("#") != -1)
		{
			// get name of target anchor
			targ = anchors[i].href.substring( anchors[i].href.indexOf("#")+1 );
			
			// find target anchor
			targarr = 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].onclick = function () {
					try {
						scrollToAnchor( this.id.substring( 2 ) );
					}
					catch (e) {}
					return false;
				};
			}
		}
		
	}
}


/*
SCROLL FUNCTIONS
*/




function scrollPage()
{
	scrTime += scrInt;
	if (scrTime < scrDur) {
		window.scrollTo( 0, easeInOut(scrTime,scrSt,scrDist,scrDur) );
	}else{
		window.scrollTo( 0, scrSt+scrDist );
		clearInterval(scrollInt);
	}
}

function scrollToAnchor(aname)
{
	var anchors, i, ele, elePosY, heightCorrection;

	if (!document.getElementById)
		return;
	
	// get anchor
	anchors = document.getElementsByTagName("a");
	for (i=0;i<anchors.length;i++) {
		if (anchors[i].name == aname) {
			ele = anchors[i];
			i = anchors.length;
		}
	}
	
	// Find anchor's Y position
	elePosY = findPosY(ele);
	
	//	The following is just to give some vertical space above where the anchor lands, 
	//	in case you think it stops too close to the top of the window.  Set to 0 if unnecessary.
	heightCorrection = 30;
	
	// set scroll target
	if (typeof (window.pageYOffset) == 'number') {
		// Non-IE modern browsers
		scrSt = window.pageYOffset;
		scrDist = elePosY - heightCorrection - scrSt;
		scrDur = 500;
	} else if (document.documentElement) {
		// IE in Standards Compliance mode
		scrSt = document.documentElement.scrollTop;
		scrDist = elePosY - scrSt;
		if (window.XMLHttpRequest) {
			// IE7
			scrDur = 500;
		} else {
			// IE6
			scrDur = 1500;
		}
	} else if (document.body && (document.body.scrollLeft || document.body.scrollTop) ) {
		// DOM compliant method, IE Quirks Mode
		scrSt = document.body.scrollTop;
		scrDist = elePosY - scrSt;
		scrDur = 500;
	}

	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;
}

Y en el HTML va:

Código HTML:

<ul>
    <li><a href="#trabajos">Trabajos</a></li>
    <li><a href="#servicios">Servicios</a></li>
    <li><a href="#contacto">Contacto</a></li>
</ul>

<a name="trabajos"></a>
<a name="servicios"></a>
<a name="contacto"></a> 

Ahi puse solo el HTML en cuestion, obvio que va con todo el contenido dentro.
A ver quien puede ayudarme.
Gracias!.