Change url when manually scrolled to an id even scrolling to top?

Question

Is it possible to change the URL in the address bar instantly when I scroll to an id? Or have a long document with multiple id and the url changes on address bar, when I hit a new id even i scroll form bottom to top.

i use Change url when manually scrolled to an anchor?

but this is not working when scroll from bottom to top.

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

Thanks in advance.

Very possible but where is the relevant source code and which part doesn't seem to be working? Can you be more specific.... can we see how you are trying to achieve this? Without seeing your attempt it's impossible to explain the problem before offering a solution. Unless you expect someone to write this for you.... — NewToJS, Jun 22 '16 at 08:18
this seems like bad UX (user experience). http://stackoverflow.com/a/14660655/3022387 mentions "causing jumps". Why not just have some links show up when near the anchors so people can use their URLs to link to that place on the page? Use pilcrow? ¶ — flowtron, Jun 22 '16 at 08:20

Ziv Weissman · Accepted Answer · 2016-06-23T14:31:07.543

After your comment, I understand what you are trying to achieve:

The following code is based on scroll up/ down.

Will store the current block and make you "jump" between blocks:

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

added:

If you only want to see the URL changes:

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

     }

  });
});

Thanks @Ziv Weissman, my request is, when i scroll top to bottom it's OK because my div id @ top and its change the URL instantly. but when i scrolling bottom to top it is wait till reach the top of the div. Thank you for understanding. — omkar, Jun 22 '16 at 10:26
Thanks you @Ziv Weissman. But It jumps to next id. i need normal scrolling. like : http://eightbitstudios.com/ Again Thank you for your time :). — omkar, Jun 23 '16 at 13:45

Change url when manually scrolled to an id even scrolling to top?

1 Answers1

Linked

Related