Estoy aprendiendo javascript (literalmente) y tengo un poco de JS (abajo) que mueve los anclajes de página 90 píxeles hacia abajo desde la parte superior de la página, para evitar que el contenido del anclaje se solape con un elemento superior fijo . Al hacer clic en enlaces a anclas en la misma página, funciona de maravilla.

El problema que tengo es cuando hago clic en un enlace que apunta a un ancla en una página diferente. Cuando se carga la nueva página, el ancla se carga en la parte superior de la página y está parcialmente oculta debajo del elemento superior fijo.

Sospecho que necesito algún tipo de evento onLoad en cada página que verifique los hashes de anclaje, pero soy demasiado nuevo para resolverlo.

Cualquier ayuda es apreciada, gracias!

Información estadística: estoy haciendo esto para la ayuda web de mi empresa. Tenemos más de 280 páginas de ayuda y más de 2.500 anclas. Espero que agregar un poco de JS a una inclusión o encabezado resuelva mi problema.

Nota: El script que estoy usando lo encontré como respuesta a una pregunta diferente de stackoverflow y está ligeramente modificado.

$(function(){
  $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    && location.hostname == this.hostname) {
      var $target = (this.hash);
      $target = target.length && target || ('[name=' + this.hash.slice(1) + ']');
      if ($target.length) {
        var targetOffset = target.offset().top - 90;
        $('html,body').animate({scrollTop: targetOffset}, 1000);
        return false;
      }
    }
  });
});
2
Mike K. 28 may. 2011 a las 00:33

3 respuestas

La mejor respuesta

De hecho, resolví esto con un poco de CSS (agregué una clase a todos mis anclajes):

a.target
{
    position: relative;
    border-top: 90px solid transparent;
    background-clip: padding-box;
    margin: -100px 0 0;
}

a.target:before
{
    content: "";
    position: absolute;
    top: -90px;
    left: 0;
    right: 0;
    border-top: 2px solid #ccc;
}
0
Mike K. 21 ene. 2013 a las 21:02

Si te entiendo correctamente; desea que este movimiento suceda al cargar la página y no solo cuando se hace clic en un enlace. Si ese es el caso, querrá usar la función each () en lugar de hacer clic (). Simplemente reemplace .click con .each y sucederá una vez que se cargue la página. Además, envuelva su coincidencia href entre comillas dobles para estar seguro.

  $('a[href*="#"]').each(function() {...
0
ventaur 27 may. 2011 a las 21:52

Esto debería funcionar bastante bien. Probado en Firefox y Chrome.

$(function(){
  if(location.hash !== "") {
    window.scrollTo(0,window.pageYOffset-90);
  }
});
2
mbxtr 27 may. 2011 a las 21:53