Ist es möglich, den Hash zu entfernen, window.location
ohne 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.
javascript
jquery
fragment-identifier
David Hellsing
quelle
quelle
IE9
.Antworten:
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 erfolgtquelle
window.location.hash = (new_hash === '') ? '_' : new_hash;
window.location.hash = "💩";
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 });
quelle
history.replaceState
Dies ist möglicherweise vorzuziehen, da durch Drücken von Zurück zur letzten gültigen URL zurückgekehrt wird.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(/#.*$/, '#'); }
quelle
window.history
, können Sie genau dies tun.window.history.pushState('', '', window.location.pathname + window.location.search);
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
quelle
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.
quelle
id
Attribut vorhanden ist, wird der Browser nicht gescrollt.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.
quelle
$(window).scrollTop(st)
anstelle von.css()
Haben Sie es
return false;
im Event-Handler versucht ? jQuery macht etwas Besonderes, wenn Sie das tun, ähnlich, aber AFAIK wirkungsvoller alse.preventDefault
.quelle
return false;
in jQuery und in nativen Ereignishandlern in kompatiblen Browsern entsprichte.preventDefault(); e.stopPropagation();
. Ich denke nicht, dass das Stoppen der Verbreitung bei diesem Problem helfen wird.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
quelle