Changing URL breaking scroll

Question

I wanted to change the url to that of the section id that is currently scrolled to. However my below code just breaks the scroll (it doesn't scroll at all).

$(document).scroll(function() {
  $('section').each(function(){
    if ($(this).offset().top) {
      window.location.hash = $(this).attr('id');
    }
  });
});

<section id="a"></section>
<br><br><br><br><br><br><br>
<section id="b"></section>
<br><br><br><br><br><br><br>
<section id="c"></section>
<br><br><br><br><br><br><br>
<section id="d"></section>

Any help would be much appreciated.

Many thanks.

$(this).attr('id') it will return you the id like a, b, c, d but when you assign it to hash it suppose to start with #, so just concate it like '#' + $(this).attr('id') and then assign the value. — PashaB
– PashaB, Commented Feb 12, 2015 at 21:58

Rick Hitchcock · Accepted Answer · 2015-02-12 22:21:01Z

2

This line returns true for all sections except the first one:

if ($(this).offset().top)

Instead, you can compare each section's offset against the window's scroll position:

if($(this).offset().top < $(window).scrollTop())

This line reloads the page, always scrolled to the last section (based on your current if):

window.location.hash = $(this).attr('id');

That's why it appears that scrolling is broken.

If you want to change the URL without reloading the page, use history.pushState().

Complete code:

$(document).scroll(function() {
  $('section').each(function() {
    if($(this).offset().top < $(window).scrollTop()) {
      history.pushState({}, '', '#'+$(this).attr('id'));
    }
  });
});

answered Feb 12, 2015 at 22:21

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing URL breaking scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related