手動でアンカーにスクロールしたときにURLを変更しますか？

Question

デフォルトでは、ウェブサイトにアンカーがあると、リンクをクリックするとアドレスバーのURLが変更されます（例：www.mysite.com/#anchor）

変更することは可能ですかアンカーにスクロールするとすぐにアドレスバーのURLが表示されますか？または、新しいアンカーをヒットしたときに、複数のアンカーとアドレスバーのURLが変更された長いドキュメントを持っていますか？

Answer 1

はこのjQueryプラグインを使用してみてください（おそらくジャンプの原因になります）。それはクールな機能がたくさんあり、あなたはブラウザのハッシュを更新するためにwindow.location.hashを使うことができます。

また、「スクロール」イベントを追加して、アンカーに達したときを確認することもできます。ここで

は、イベントを説明するための作業フィドルです：http://jsfiddle.net/gugahoi/2ZjWP/8/ 例：

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

あなたはアドレスバー

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. バインドにURLを変更するにはHTML 5 pushstateを使用することができます手より遅い。jquery scroll event。
2. 現在、アンカーがthis jquery scriptと表示されているかどうかを確認します。 Scrollorama：
3. 使用pushstateまたは設定された場所

Answer 4

あなたはjQueryのスクロールイベント（http://api.jquery.com/scroll/）に結合し、呼ばれるコールバック関数の呼び出しごとに、どのように遠くに確認することができますこの値をチェックしてユーザーがスクロールしたことを文書化します。.scrollTop（http://api.jquery.com/scrollTop/）、te location.hashオブジェクト（http://www.w3schools.com/jsref/prop_loc_hash.asp）を操作してアンカーを設定します。

それはこのようなものになるだろう：あなたがそれらを選択した後にアンカーを並べ替える場合は最初の可視アンカーは常に設定されるように、あなたは、より正確かもしれない

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

。

Answer 5

私はこのようなことをする必要があると思います。試行していない

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