Zmienić adres URL po ręcznym przewinięciu do kotwicy?

Question

Domyślnie, jeśli mam zakotwiczenia w mojej witrynie, adres URL na pasku adresu zostanie zmieniony, gdy kliknę link (np. Www.mysite.com/#anchor)

Czy można zmienić adres URL na pasku adresu natychmiast po przewinięciu do kotwicy? A może masz długi dokument z wieloma zakotwiczeniami i zmiany adresu URL na pasku adresu, kiedy uderzę w nową kotwicę?

Answer 1

Spróbuj użyć tego jquery plugin: Scrollorama. Ma mnóstwo ciekawych funkcji i możesz użyć window.location.hash, aby zaktualizować hash przeglądarki.

Można również dodać zdarzenie "przewiń", aby sprawdzić, kiedy dojdzie do zakotwiczenia.

Oto skrzypce roboczego zilustrować wydarzenia: http://jsfiddle.net/gugahoi/2ZjWP/8/ Przykład:

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

można używać HTML 5 pushState zmienić adres URL w pasku adresu

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 ręka ler do jquery scroll event.
2. Sprawdź, czy kotwica jest obecnie widoczna na ekranie z this jquery script.
3. Zastosowanie pushState lub ustawić położenie (prawdopodobnie spowoduje skoki)

Answer 4

można powiązać ze zdarzeniem jQuery przewijania (http://api.jquery.com/scroll/) i na każdym wywołaniu callback nazwie sprawdzić, jak daleko na dokument, który użytkownik przewinął, sprawdzając tę ​​wartość: .scrollTop (http://api.jquery.com/scrollTop/) i ustaw kotwicę, manipulując tym obiektem location.hash (http://www.w3schools.com/jsref/prop_loc_hash.asp).

To byłoby coś takiego:

// 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; 
    } 
    } 
}); 

mógłby być bardziej precyzyjny, jeśli sortować kotwice po wybraniu ich, tak, że pierwsze widoczne kotwica zostanie ustawiony zawsze.

Answer 5

Myślę, że trzeba coś takiego zrobić. Nie sprawdzono w działaniu:

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; 
     } 
    }); 
});`