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 변경을보고 싶다면