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:
Y en el HTML va:// 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; }
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>
A ver quien puede ayudarme.
Gracias!.