Modifica l'url quando si scorre manualmente verso un ancoraggio?

Question

Per impostazione predefinita, se si dispone di ancore nel mio sito Web, l'URL nella barra degli indirizzi viene modificato quando faccio clic su un collegamento (ad esempio www.mysite.com/#anchor)

È possibile modificare l'URL nella barra degli indirizzi all'istante quando scorro fino all'ancora? O hai un lungo documento con più ancore e l'url cambia sulla barra degli indirizzi, quando colpisco una nuova ancora?

Answer 1

Provare a utilizzare questo plugin jQuery: Scrollorama. Ha un sacco di funzioni interessanti ed è possibile utilizzare window.location.hash per aggiornare l'hash dei browser.

In alternativa, è possibile aggiungere un evento di "scorrimento" per verificare quando viene raggiunto un ancoraggio.

Ecco un violino di lavoro per illustrare l'evento: http://jsfiddle.net/gugahoi/2ZjWP/8/ Esempio:

$(function() { 
    var currentHash = "#initial_hash" 
    $(document).scroll(function() { 
     $('.anchor_tags').each(function() { 
      var top = window.pageYOffset; 
      var distance = top - $(this).offset().top; 
      var hash = $(this).attr('href'); 
      // 30 is an arbitrary padding choice, 
      // if you want a precise check then use distance===0 
      if (distance < 30 && distance > -30 && currentHash != hash) { 
       window.location.hash = (hash); 
       currentHash = hash; 
      } 
     }); 
    }); 
}); 

Answer 2

è possibile utilizzare HTML 5 pushState cambiare l'URL nella barra degli indirizzi

window.history.pushstate

---

1. https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
2. How can I use window.history.pushState 'safely'

Answer 3

1. Bind una mano fino a jquery scroll event.
2. Verificare se un'ancora è attualmente visibile sullo schermo con this jquery script.
3. Usa pushState oppure impostare posizione (probabilmente causerà salti)

Answer 4

è possibile associare all'evento jQuery scorrimento (http://api.jquery.com/scroll/) e su ogni chiamata del callback chiamata, controllare fino a che punto il documentare l'utente scorrendo controllando questo valore: .scrollTop (http://api.jquery.com/scrollTop/) e impostare l'ancora manipolando l'oggetto location.hash (http://www.w3schools.com/jsref/prop_loc_hash.asp).

sarebbe qualcosa di simile:

// Checks if the passed element is visible on the screen after scrolling 
// source: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling 
function isScrolledIntoView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

$('#document').scroll(function(e) { 
    var anchors = $('.anchor'); 
    for (var i = 0; i < anchors.length; ++i) { 
    if (isScrolledIntoView(anchors[i])){ 
     var href = $(anchors[i]).attr('href'); 
     location.hash = href.slice(href.indexOf('#') + 1); 
     break; 
    } 
    } 
}); 

si potrebbe essere più precisi, se si ordina gli ancoraggi dopo averle selezionate, in modo che il primo ancoraggio visibile sarà impostato sempre.

Answer 5

Penso che tu debba fare qualcosa del genere. Non provato in azione

var myElements = $("div.anchor"); // You target anchors 
$(window).scroll(function(e) { 
    var scrollTop = $(window).scrollTop(); 
    myElements.each(function(el,i) { 
     if ($(this).offset().top > scrollTop && $(myElements[i+1]).offset().top < scrollTop) { 
      location.hash = this.id; 
     } 
    }); 
});`