javascript - validar - ¿Cómo puedo eliminar el hash de ubicación sin hacer que la página se desplace?

validar formulario javascript html5

Question

¿Es posible eliminar el hash de window.location sin hacer que la página salte, vaya a la parte superior? Necesito poder modificar el hash sin causar ningún salto.

Tengo esto:

$(''<a href="#123">'').text(''link'').click(function(e) {
  e.preventDefault();
  window.location.hash = this.hash;
}).appendTo(''body'');

$(''<a href="#">'').text(''unlink'').click(function(e) {
  e.preventDefault();
  window.location.hash = '''';
}).appendTo(''body'');

Vea el ejemplo en vivo aquí: http://jsbin.com/asobi

Cuando el usuario hace clic en '' enlace '', la etiqueta hash se modifica sin ningún salto de página, por lo que está funcionando bien.

Pero cuando el usuario hace clic en " desvincular ", se quita la etiqueta y la página se desplaza hacia la parte superior. Necesito eliminar el hash sin este efecto secundario.

Answer 1

¿Has intentado return false; en el controlador de eventos? jQuery hace algo especial cuando haces eso, similar a, pero AFAIK más impactante, que e.preventDefault .

Answer 2

Al establecer window.location.hash en empty o en el nombre de anclaje no existente, siempre se forzará a la página a saltar a la parte superior. La única manera de evitar esto es tomar la posición de desplazamiento de la ventana y establecerla en esa posición nuevamente después del cambio de hash.

Esto también obligará a volver a pintar la página (no se puede evitar), aunque como se ejecuta en un solo proceso js, ​​no saltará arriba / abajo (teóricamente).

$(''<a href="#123">'').text(''link'').click(function(e) {
    e.preventDefault();
    window.location.hash = this.hash;
}).appendTo(''body'');

$(''<a href="#">'').text(''unlink'').click(function(e) {
    e.preventDefault();
    var pos = $(window).scrollTop(); // get scroll position
    window.location.hash = '''';
    $(window).scrollTop(pos); // set scroll position back
}).appendTo(''body'');

Espero que esto ayude.

Answer 3

Creo que si pones un hash falso, no se desplazará, ya que no hay coincidencia para desplazarte.

<a href="#A4J2S9F7">No jumping</a>

o

<a href="#_">No jumping</a>

"#" en sí mismo es equivalente a "_top" tanto, provoca un desplazamiento hacia la parte superior de la página.

Answer 4

Esta es una publicación anterior, pero quería compartir mi solución. Todos los enlaces de mi proyecto que están siendo manejados por JS tienen el atributo href = "#_ js" (o el nombre que quieras usar solo con ese propósito), y en la inicialización de la página Hago:

$(''body'').on(''click.a[href="#_js"]'', function() {
    return false;
});

Eso hará el truco

Answer 5

La propiedad hash de window.location es estúpida de varias maneras. Este es uno de ellos; el otro es que tiene diferentes valores de obtención y establecimiento:

window.location.hash = "hello";  // url now reads *.com#hello
alert(window.location.hash);   // shows "#hello", which is NOT what I set.
window.location.hash = window.location.hash; // url now reads *.com##hello

Tenga en cuenta que establecer la propiedad hash en '''' elimina también la marca hash; eso es lo que redirige a la página. Para establecer el valor de la parte hash de la url en '''', dejando la marca hash y, por lo tanto, no refrescando, escriba esto:

window.location.href = window.location.href.replace(/#.*$/, ''#'');

No hay forma de eliminar completamente la marca de almohadilla una vez establecida sin actualizar la página.

ACTUALIZACIÓN 2012:

Como Blazemonger y thinkdj han señalado, la tecnología ha mejorado. Algunos navegadores te permiten borrar ese hashtag, pero otros no. Para admitir ambos, intente algo como:

if ( window.history && window.history.pushState ) { 
    window.history.pushState('''', '''', window.location.pathname) 
} else { 
    window.location.href = window.location.href.replace(/#.*$/, ''#''); 
}

Answer 6

No estoy seguro si esto produce el resultado deseado, dale una oportunidad:

$(''<a href="#">'').text(''unlink'').click(function(e) {
    e.preventDefault();
    var st = parseInt($(window).scrollTop())
    window.location.hash = '''';
    $(''html,body'').css( { scrollTop: st });  
});

Básicamente, guarde el desplazamiento de desplazamiento y restáurelo después de asignar el hash vacío.

Answer 7

Uso lo siguiente en algunos sitios, ¡NO HAY SALIDAS DE PÁGINAS!

Buena barra de direcciones limpia para navegadores compatibles con HTML5, y solo un # para navegadores antiguos.

$(''#logo a'').click(function(e){
    window.location.hash = ''''; // for older browsers, leaves a # behind
    history.pushState('''', document.title, window.location.pathname); // nice and clean
    e.preventDefault(); // no page reload
});

Answer 8

Espero que esto ayude

html

<div class="tabs">
  <ul>
    <li><a href="#content1">Tab 1</a></li>
    <li><a href="#content2">Tab 2</a></li>
    <li><a href="#content3">Tab 3</a></li>
  </ul>
</div>
<div class="content content1">
    <p>1. Content goes here</p>
</div>
<div class="content content2">
    <p>2. Content goes here</p>
</div>
<div class="content content3">
    <p>3. Content goes here</p>
</div>

js

function tabs(){
  $(".content").hide();

  if (location.hash !== "") {
    $(''.tabs ul li:has(a[href="'' + location.hash + ''"])'').addClass("active");
    var hash = window.location.hash.substr(1);
    var contentClass = "." + hash;
    $(contentClass).fadeIn();
  } else {
    $(".tabs ul li").first().addClass("active");
    $(''.tabs'').next().css("display", "block");
  }
}
tabs();

$(".tabs ul li").click(function(e) {
  $(".tabs ul li").removeAttr("class");
  $(this).addClass("active");
  $(".content").hide();
  var contentClass = "." + $(this).find("a").attr("href").substr(1);
  $(contentClass).fadeIn();
  window.location.hash = $(this).find("a").attr("href");
  e.preventDefault();
  return false;
});

URL sin hash
http://output.jsbin.com/tojeja

URL con hashtag que no salta al ancla.
http://output.jsbin.com/tojeja#content1