idを手動でスクロールして上にスクロールしてもurlを変更しますか？

Question

私はIDにスクロールするとすぐにアドレスバーのURLを変更することはできますか？または、複数のIDを持つ長い文書を持ち、アドレスバーにURLが変更されたときに、新しいIDを押したときにフォームを下から上にスクロールすることもできます。

私はChange url when manually scrolled to an anchor?

を使用しますが、ときに、スクロール下から上へ、これは動作しません。事前に

$(function() { 
 
    var currentHash = "#"; 
 
    $(document).scroll(function() { 
 
    $('.block').each(function() { 
 
     var top = window.pageYOffset; 
 
     var distance = top - $(this).offset().top; 
 
     var hash = $(this).attr('id'); 
 
     // 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; 
 
     } 
 
    }); 
 
    }); 
 
});

body { 
 
    margin: 0px; 
 
} 
 
div { 
 
    height: 900px; 
 
    text-align: center; 
 
    padding: 15px; 
 
    background-color: #00f; 
 
} 
 
div:nth-child(even) { background: #ccc; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 

 
<div class="block" id="one">Block 1</div> 
 
<div class="block" id="two">Block 2</div> 
 
<div class="block" id="three">Block 3</div> 
 
<div class="block" id="four">Block 4</div> 
 
<div class="block" id="five">Block 5</div>

感謝。あなたのコメントの後

Answer 1

は、私はあなたが達成しようとしているのか理解：

次のコードは、アップ/ダウンスクロールに基づいています。

$(function() { 
    var blocksArr = $('.block'); 
    var lastScrollTop = 0; 
    var currentBlock = 0; 


    $(document).scroll(function() { 
    var st = $(this).scrollTop(); 
    var hash; 

    //make sure it is in the boundaries  
    if (st > lastScrollTop && currentBlock< blocksArr.length -1){ 
    // downscroll code 
     hash = $(blocksArr[++currentBlock]).attr('id'); 
     window.location.hash = (hash); 
    } 
    else 
     if (st < lastScrollTop && currentBlock > 0){ 
    // scrollup code 
     hash = $(blocksArr[--currentBlock]).attr('id'); 
     window.location.hash = (hash); 
    } 

    lastScrollTop = $(this).scrollTop(); 
    }); 
}); 

"working" fiddle (hash wont change on fiddle)

が追加さ：

はあなたのブロックの間に "ジャンプ" 現在のブロックを格納して行います

$(function() { 
    var currentHash = "#"; 
    var blocksArr = $('.block'); 

    $(document).scroll(function() { 
    var currentTop = window.pageYOffset/1; 
    for (var i=0; blocksArr.length; i++){ 
     var currentElementTop = $(blocksArr[i]).offset().top; 
     var hash = $(blocksArr[i]).attr('id'); 
     if (currentElementTop < currentTop && currentTop < currentElementTop + $(blocksArr[i]).height() && currentHash!=hash){ 
       if(history.pushState) { 
       history.pushState(null, null, '#'+hash); 
     } 
     else { 
      location.hash = '#'+hash; 
     } 
       currentHash = hash; 
     } 

    } 

    }); 
}); 

：

あなただけのURLの変更を確認したい場合