Come posso rimuovere l'hash della posizione senza far scorrere la pagina?

Question

E 'possibile rimuovere l'hash da window.location senza far scorrere la pagina verso l'alto? Devo essere in grado di modificare l'hash senza causare salti.

ho questo:

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

vedi esempio vivo qui: http://jsbin.com/asobi

Quando 'collegamento' l'utente seleziona il tag hash viene modificato senza qualsiasi pagina, salti, in modo che sta lavorando bene.

Ma quando l'utente fa clic su "scollega" il tag has viene rimosso e lo scroll della pagina salta in alto. Devo rimuovere l'hash senza questo effetto collaterale.

Answer 1

Credo che se si inserisce un hash fittizio non scorrerà perché non vi è alcuna corrispondenza con cui scorrere.

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

o

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

"#" di per sé è equivelent a "_top" provoca quindi un rotolo alla parte superiore della pagina

Answer 2

Non sono sicuro se questo produce il risultato desiderato, dare uno scatto:

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

In pratica salvare lo scorrimento di scorrimento e ri memorizzarlo dopo aver assegnato l'hash vuoto.

Answer 3

La proprietà hash di window.location è stupida in un paio di modi. Questo è uno di loro; L'altra è che è ha ottenere diversi e valori impostati:

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 

Si noti che l'impostazione della proprietà di hash per '' rimuove il cancelletto troppo; questo è ciò che reindirizza la pagina. Per impostare il valore della parte hash della url '', lasciando il cancelletto e quindi non rinfrescante, scrivere questo:

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

Non v'è alcun modo per rimuovere completamente il carattere cancelletto una volta impostato senza aggiornare la pagina .

UPDATE 2012:

Come Blazemonger e thinkdj hanno sottolineato, la tecnologia è migliorata. Alcuni browser ti consentono di cancellare l'hashtag, ma altri no. Per supportare entrambi, provare qualcosa di simile:

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

Answer 4

Hai provato return false; nel gestore di eventi? jQuery fa qualcosa di speciale quando lo fai, simile a, ma AFAIK più di impatto, rispetto a e.preventDefault.

Answer 5

L'impostazione di window.location.hash per il nome dell'ancoraggio vuoto o non esistente, imporrà sempre la pagina a saltare in alto. L'unico modo per evitare ciò è afferrare la posizione di scorrimento della finestra e impostarla nuovamente su quella posizione dopo la modifica dell'hash.

Questo forzerà anche un ridisegno della pagina (non posso evitarlo), anche se poiché è eseguito in un singolo processo js, ​​non salterà su/giù (in teoria).

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

Spero che questo aiuti.

Answer 6

Io uso il seguente su alcuni siti, NESSUN INCONTRO PAGINA!

Bella barra degli indirizzi pulita per i browser HTML5 e solo una # per i browser più vecchi.

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

Questo è un vecchio post, ma ho voluto condividere la mia soluzione Tutti i link nel mio progetto che in corso di trattazione da JS stanno avendo href = "#_ js" attributo (o qualsiasi altro nome che si desidera utilizzare per questo scopi soltanto), e sulla pagina di inizializzazione che faccio:

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

Basta così il trucco

Answer 8

Spero che questo aiuti

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 senza alcuna hash.
http://output.jsbin.com/tojeja

URL con hashtag che non salta all'ancora. http://output.jsbin.com/tojeja#content1