jQuery nav basato su hash con jquery-bbq fa saltare la pagina

Question

Ho un sito in www.tinytoepress.com che utilizza la navigazione basata sul tag di ancoraggio #hash, usando jQuery e il plugin jquery-bbq. Funziona alla grande, tranne che a volte fa saltare la pagina sotto l'intestazione come se si trattasse di un tag effettivo <a name...>. Ma non ci sono tag di questo tipo.

Ad esempio, con Chrome su OS X, se visito la home page:

http://www.tinytoepress.com/

e quindi fare clic sul collegamento "Store" in alto a sinistra, vado a:

http://www.tinytoepress.com/#store

Tuttavia, sono sceso sotto l'intestazione, che non è desiderata. Mi piacerebbe rimanere al vertice.

Se faccio scorrere verso l'alto e faccio clic su "Informazioni", vado sulla pagina Informazioni, ma di nuovo sono scostato oltre l'intestazione. Tuttavia, se ora scorressi verso l'alto e clicco su "Store" di nuovo, vado su Store senza scorrere verso il basso, che è desiderato.

Sto utilizzando i metodi semplici .show() e .hide() per controllare la visibilità degli div s impostati dai clic nav.

Qualche idea su come evitare di saltare nella pagina?

Answer 1

Il comportamento predefinito del browser quando viene modificato l'indirizzo hash è quello di passare all'id che rappresenta il hash. Ad esempio: http://example.com/some-page#store cercherà sulla pagina l'elemento con ID store (<div id="store">...</div>). Se questo viene trovato, la pagina salterà lì.

Invece di impostare l'attributo id, suggerisco di impostare un attributo personalizzato data-attr.

<div id="store">...</div> diventerà <div data-page="store">...</div> e nel lato jQuery si sostituirà $(location.hash).show() con:

$("[data-page='" + location.hash.substring(1) + "']").show() 

Il codice sarà simile di seguito:

$("a").on("click", function() { 

    // get the clicked link 
    var $clickedLink = $(this); 

    // get the url 
    var url = $clickedLink.attr("href"); 

    // we search the hashes 
    if (url[0] !== "#") { return; } 

    // change the location using js 
    location.hash= url; 

    // hide all pages 
    $("[data-page]").hide(); 

    // show the current page 
    $("[data-page='" + url.substring(1) + "']").show(); 

    // prevent the default browser behaviour (jumping) 
    return false; 
}); 

JSFIDDLE

Answer 2

Siamo spiacenti, non è possibile replicare il problema (con OS X 10.9 con Google Chrome 31.0.1650.63). Una possibile spiegazione per il tuo strano salto: A volte la lunghezza del contenuto cambia anche un ruolo, durante il caricamento e l'inserimento di nuovi contenuti ...

Answer 3

credo che possa essere relativo al modo in cui questo codice aggiunge e rimuove l'iframe ogni volta che si fa clic su Nav. Ho scoperto che se uno permette all'iframe di caricare completamente il salto della pagina non succede. Nei miei strumenti di Chrome, se cancello l'iframe, i salti si fermano tutti insieme. Potrei sbagliarmi qui, ma se stai solo mostrando e nascondendo il contenuto della pagina quando si fa clic sul nav, non dovrebbe esserci la necessità di memorizzare l'iframe in un oggetto Jquery e quindi rimetterlo nello stesso contenitore div. Quando l'iframe riporta tutte le chiamate all'interno dell'Iframe per ottenere nuovamente risorse js. Queste chiamate vengono interrotte quando un utente fa clic su un elemento nav diverso. Cerca nella scheda di rete degli strumenti di Chrome e vedrai dopo aver cliccato su tutti i Nav che il recupero di una risorsa viene cancellato e un altro ha un contenuto parziale di 206 nella colonna di stato. Il mio suggerimento è caricare l'Iframe una volta e quindi nascondere il contenuto quando necessario.Spero che questo sia stato utile in bocca al lupo.

b = $("#movieCtn").html(), console.log("html: ", b), $("#movieCtn").html(""), console.log(b,$("#movieCtn").html()), $("#movieCtn").html(b))