Como moverse de un punto a otro de la página grácilmente

Clasificado en:

Una de mis colegas (psicóloga), me decía que lo más apestoso del mundo era seleccionar un ítem de una lista para modificar (digamos, la ficha de una persona) y estar como tarado bajando una pantalla completa para editar la información. Así que, me instó a programar algo para que saltara el foco desde el cuadro de selección al de edición de forma automática (sin usar un link con #, se entiende).

La tarea alguna vez la intente sin mucho éxito, así que preferí ir con Google para buscar la información. Y, ¡cha-chán!, encontré este artículo del año 2003 en sitepoint llamado Make Internal Links Scroll Smoothly with JavaScript, que da una solución bastante simpática para hacer que la página no salte al clickear en un link interno, sino que se "deslice".

Haciendo unos pequeños cambios por aquí y allá, llegué a una versión que puede ser llamada desde un código cualquiera, ya sea mandando como parámetro el id o el objeto hacia donde queremos movernos. Very nice!

// smoothscroll.js
// Permite saltar de un punto a otro de la página moviéndose
// en forma paulatina.
/**
* Función que permite saltar de la posición actual de la pantalla
* hacia otro objeto, a través de una referencia o su id
* @param string|object
*/
function smoothScroll(des) {
if(typeof des=='object') {
var destinationLink=des
} else if(typeof des=='string') {
var destinationLink=document.getElementById(des)
}
// Find the destination's position
var destx = destinationLink.offsetLeft;
var desty = destinationLink.offsetTop;
var thisNode = destinationLink;
while (thisNode.offsetParent &&
(thisNode.offsetParent != document.body)) {
thisNode = thisNode.offsetParent;
destx += thisNode.offsetLeft;
desty += thisNode.offsetTop;
}
// Stop any current scrolling
clearInterval(ss_INTERVAL);
cypos = ss_getCurrentYPos();
ss_stepsize = parseInt((desty-cypos) / ss_STEPS); // /
ss_INTERVAL = setInterval('ss_scrollWindow('+ss_stepsize+','+desty+')',10);
// And stop the actual click happening
if (window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
}
function ss_scrollWindow(scramount,dest) {
wascypos = ss_getCurrentYPos();
isAbove = (wascypos < dest);
window.scrollTo(0,wascypos + scramount);
iscypos = ss_getCurrentYPos();
isAboveNow = (iscypos < dest);
if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
// if we've just scrolled past the destination, or
// we haven't moved from the last scroll (i.e., we're at the
// bottom of the page) then scroll exactly to the link
window.scrollTo(0,dest);
// cancel the repeating timer
clearInterval(ss_INTERVAL);
// and jump to the link directly so the URL's right
}
}
function ss_getCurrentYPos() {
if (document.body && document.body.scrollTop)
return document.body.scrollTop;
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
if (window.pageYOffset)
return window.pageYOffset;
return 0;
}
var ss_INTERVAL;
var ss_STEPS = 25;

1836 lecturas

Pues vaya que me ha parecido

Pues vaya que me ha parecido interesante este tutorial, principalmente por el atractivo visual que le puede dar a los enlaces internos.

Felicidades por los arreglos y ya lo estare probando en algunos proyectos nuevos :D

Enviado por Stan (no verificado) el Jue, 28/07/2005 - 11:53.

responder

Je, gracias

El mérito principal es del chico que hizo el script. El mío, el de pillarlo :)
Se ve muy agradable y ayuda mucho en ubicarse en que parte del documento está uno.

Enviado por clbustos el Jue, 28/07/2005 - 13:11.