jQuery: desplácese hasta el ancla al llamar a la URL, reemplace el comportamiento de los navegadores

Ya conozco el plugin jQuery ScrollTo, pero hasta ahora no encontré ninguna forma de darme cuenta de lo siguiente:

Los usuarios acceden a mi sitio (escribiendo, NO haciendo clic en un enlace en mi página) domain.com/bla.php#foo

y el ancla “#foo” existe. Ahora quiero que el navegador del usuario NO se desplace automáticamente a “#foo”, en su lugar, quiero desplazarme suavemente para que el elemento ‘#foo’ se encuentre en la mitad de la vista y NO en la posición superior absoluta de vista de los usuarios.

gracias hasta ahora

Si no creas el ancla real foo , crea tu ancla con un id como _foo (algo como ). Puede manejar el $(document).ready para lograr esto.

Algo como (pseudo código)

 $(document).ready(function() { var elem = $('#_' + window.location.hash.replace('#', '')); if(elem) { $.scrollTo(elem.left, elem.top); } }); 

Hice algunas mejoras en el script de Jan Jongboom para que ahora tenga este aspecto:

 $(document).ready(function () { // replace # with #_ in all links containing # $('a[href*=#]').each(function () { $(this).attr('href', $(this).attr('href').replace('#', '#_')); }); // scrollTo if #_ found hashname = window.location.hash.replace('#_', ''); // find element to scroll to ( or anything with particular id) elem = $('a[name="' + hashname + '"],#' + hashname); if(elem) { $(document).scrollTo(elem, 800); } }); 

Cambia todos los anclajes en los enlaces, por lo que para los usuarios sin javascript, el comportamiento permanecerá intacto.

La respuesta de Machineghost fue muy útil. El código que parché toma un parámetro de URL y lo convierte en una etiqueta hash a la que luego se desplaza el navegador tan pronto como el DOM esté listo.

La URL se vería así:

 www.mysite.com/hello/world.htm?page=contact 

Contacto es el nombre de la ID a la que desea desplazarse

 

Contact Us

Aquí está el código:

 // Get any params from the URL $.extend({ getUrlVars: function(){ var vars = [], hash; var url = decodeURIComponent(window.location.href); var hashes = url.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; }, getUrlVar: function(name){ return $.getUrlVars()[name]; } }); $(document).ready(function() { // Unhide the main content area $('section.centered').fadeIn('slow'); // Create a var out of the URL param that we can scroll to var page = $.getUrlVar('page'); var scrollElement = '#' + page; // Scroll down to the newly specified anchor point var destination = $(scrollElement).offset().top; $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-75}, 800 ); return false; }); 

Revisé esto en Chrome y FF y funcionó muy bien. Intente ajustar "destino-75" si el objective de desplazamiento no va al lugar exacto donde lo desea.

No podría haberlo hecho sin las publicaciones anteriores, así que gracias!

 /* scrolling to element */ var headerHeight = $('#header').height() + $('#header-bottom-cap').height() + 10; //When the header position is fixed $('a').click(function(){ var hashEle = $(this).attr('href').split('#'); if (hashEle.length > 1) { if (hashEle[1] == 'top') { $('body, html').animate({ scrollTop: 0 },500); } else { jQuery('body, html').animate({ scrollTop: $('#'+ hashEle[1]).offset().top - headerHeight },500); } }; }) // find element from url hashname = window.location.hash.replace('#', ''); elem = $('#' + hashname); if(hashname.length > 1) { if(hashname == 'top') { $('body, html').animate({ scrollTop: 0 },200); } else { $('body, html').animate({ scrollTop: $(elem).offset().top - headerHeight },500); } }; /* END scrolling to element */ 

este script debe estar en $ (document) .ready (function () {});

Aún puedes usar ScrollTo. Desearía representar la página sin anclajes y luego usar JavaScript que se ejecuta cuando se carga la página para obtener el ancla de la URL. Luego puede usar ese texto para desplazarse a una ID particular.

No está seguro de cómo obtener el elemento en el centro de la página, pero puede especificar un desplazamiento para el desplazamiento.

No quiero decir que esto es imposible, pero … al menos será bastante desafiante. El navegador (o al menos todos los que conozco) se desplaza al punto de anclaje en cuanto se carga esa parte de la página; AFAIK no hay una forma basada en Javascript para evitar eso (necesitarías un complemento del navegador o algo así).

Sin embargo, creo que es posible que pueda usar una variante de un script “no mostrar la página hasta que la página esté completamente cargada” para obtener el comportamiento que desea. En otras palabras, usted debería:

  1. Oculte todo el contenido de su página antes de la carga (es decir, tenga un DIV que envuelva toda la página y ponga un estilo de “mostrar: ninguno”)

  2. Adjunte un controlador de eventos “onLoad” a la página que no oculta su DIV, y …

  3. En ese mismo controlador de eventos “onLoad”, use un mecanismo de desplazamiento JS estándar (es decir, ScrollTo) para desplazarse al ancla (creo que podrá determinar a qué ancla se desplazará al marcar window.location)

En teoría, debido a que el navegador se desplazará entre # 1 y # 2 (y dado que no hay ningún lugar al que desplazarse, con el contenido oculto y todo, imagino que no hará nada), el mecanismo de desplazamiento El uso en el # 3 no debería tener ninguna interferencia.

Dicho esto, todo lo anterior es un plan completamente no probado; Su kilometraje puede variar. Incluso si funciona, será una tarea difícil de implementar, por lo que, a menos que realmente desee este comportamiento, es casi seguro que no merece la pena.

eso no es posible

editar

El comportamiento está completamente en manos de la UA.