Jak mogę usunąć hash lokalizacji bez powodowania przewijania strony?

Używam następujących NA kilku stronach, żadnych skoków strony!

Ładny czysty pasek adresu dla przeglądarek przyjaznych HTML5 i po prostu # dla starszych przeglądarek.

$('#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
});

Okno.lokalizacja jest głupia pod kilkoma względami. Jest to jedna z nich; druga jest taka, że ma różne wartości get I set:

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

Zauważ, że ustawienie właściwości hash na " usuwa również znak hash; to jest to, co przekierowuje stronę. Aby ustawić wartość części skrótu adresu url na", pozostawiając znak skrótu, a tym samym nie odświeżając, napisz to:

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

Nie ma możliwości całkowitego usunięcia znaku skrótu po ustawieniu bez odświeżania strona.

Aktualizacja 2012:

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

To jest stary post, ale chciałem podzielić się moim rozwiązaniem Wszystkie linki w moim projekcie, które są obsługiwane przez JS, mają atrybut href="#_js" (lub jakąkolwiek nazwę chcesz użyć tylko do tego celu), a na inicjalizacji strony robię:

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

That ' ll do the trick

Ustawianie okna.miejsce.hash do pustej lub nieistniejącej nazwy kotwicy zawsze wymusi Przejście strony do góry. Jedynym sposobem, aby temu zapobiec, jest złapanie pozycji przewijania okna i ustawienie go ponownie po zmianie skrótu.

Wymusi to również przemalowanie strony( nie można tego uniknąć), chociaż ponieważ jest wykonywana w jednym procesie js, nie będzie skakać w górę/w dół (teoretycznie).

$('<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');

Nie jestem pewien, czy to da pożądany efekt, spróbuj:

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

Zasadniczo Zapisz przesunięcie przewijania i przywróć je po przypisaniu pustego skrótu.

Próbowałeś return false; w programie obsługi zdarzenia? jQuery robi coś specjalnego, gdy to robisz, podobnie, ale AFAIK bardziej wpływowe, niż e.preventDefault.

Mam nadzieję, że to pomoże

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 bez hasha.
http://output.jsbin.com/tojeja

URL z hashtagiem, który nie przeskakuje do kotwicy.
http://output.jsbin.com/tojeja#content1