CODEWITHSUNDEEP
javascriptjquery
omkar
omkar

Reputation: 2038

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

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.

Upvotes: 2

Views: 4991

Answers (1)

Ziv Weissman
Ziv Weissman

Reputation: 4536

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

     }

  });
});

Upvotes: 3

Related Questions