Wie kann ich den Standort-Hash entfernen, ohne dass die Seite gescrollt wird?

Ist es möglich, den Hash zu entfernen, window.locationohne dass die Seite nach oben springt? Ich muss in der Lage sein, den Hash zu ändern, ohne Sprünge zu verursachen.

Ich habe das:

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

Siehe Live-Beispiel hier: http://jsbin.com/asobi

Wenn der Benutzer auf " Link " klickt, wird das Hash-Tag ohne Seitensprünge geändert, sodass dies einwandfrei funktioniert.

Wenn der Benutzer jedoch auf " Verknüpfung aufheben " klickt, wird das Has -Tag entfernt und die Seite springt nach oben. Ich muss den Hash ohne diese Nebenwirkung entfernen.

Ich glaube, wenn Sie nur einen Dummy-Hash eingeben, wird dieser nicht gescrollt, da es keine Übereinstimmung gibt, zu der Sie scrollen können.

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

oder

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

"#"an sich ist gleichbedeutend "_top"damit, dass ein Bildlauf zum Anfang der Seite erfolgt

Ich benutze das Folgende auf einigen Seiten, KEINE SEITENSPRÜCHE!

Schöne, saubere Adressleiste für HTML5-freundliche Browser und nur ein # für ältere Browser.

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

Die Hash-Eigenschaft von window.location ist in vielerlei Hinsicht dumm. Dies ist einer von ihnen; Das andere ist, dass es unterschiedliche Werte zum Abrufen und Festlegen hat:

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

Beachten Sie, dass durch Setzen der Hash-Eigenschaft auf '' auch die Hash-Markierung entfernt wird. Das ist es, was die Seite umleitet. Um den Wert des Hash-Teils der URL auf '' zu setzen, die Hash-Markierung zu belassen und daher nicht zu aktualisieren, schreiben Sie Folgendes:

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

Es gibt keine Möglichkeit, die einmal gesetzte Raute vollständig zu entfernen, ohne die Seite zu aktualisieren.

UPDATE 2012:

Wie Blazemonger und thinkdj hervorgehoben haben, hat sich die Technologie verbessert. In einigen Browsern können Sie dieses Hashtag löschen, in anderen nicht. Versuchen Sie Folgendes, um beide zu unterstützen:

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

Dies ist ein alter Beitrag, aber ich wollte meine Lösung teilen. Alle Links in meinem Projekt, die von JS verarbeitet werden, haben das Attribut href = "#_ js" (oder einen beliebigen Namen, den Sie nur für diese Zwecke verwenden möchten) und die Seiteninitialisierung Ich mache:

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

Das wird den Trick machen

Wenn Sie window.location.hash auf einen leeren oder nicht vorhandenen Ankernamen setzen, wird die Seite immer gezwungen, nach oben zu springen. Die einzige Möglichkeit, dies zu verhindern, besteht darin, die Bildlaufposition des Fensters zu erfassen und nach dem Hash-Wechsel wieder auf diese Position zu setzen.

Dadurch wird auch ein Neulackieren der Seite erzwungen (kann nicht vermieden werden). Da sie jedoch in einem einzelnen js-Prozess ausgeführt wird, springt sie (theoretisch) nicht nach oben / unten.

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

Hoffe das hilft.

Ich bin mir nicht sicher, ob dies zum gewünschten Ergebnis führt. Probieren Sie es aus:

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

Speichern Sie grundsätzlich den Bildlaufversatz und stellen Sie ihn wieder her, nachdem Sie den leeren Hash zugewiesen haben.

Haben Sie es return false;im Event-Handler versucht ? jQuery macht etwas Besonderes, wenn Sie das tun, ähnlich, aber AFAIK wirkungsvoller als e.preventDefault.

Hoffe das hilft

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

URL mit Hashtag, die nicht zum Anker springt.
http://output.jsbin.com/tojeja#content1