2

I've got a menu with scrollspy (using twitter boostrap). I want update the window.location.hash when the user scrolls down to a next section.

The following code works when the user scrolls down:

$(window).on('activate.bs.scrollspy', function (e) {
  location.hash = $("a[href^='#']", e.target).attr("href") || location.hash;
});

However it does not work very well when the user scrolls upwards.

The reason for this is that setting a new location.hash triggers the browser to navigate towards that respective anchor. That triggers a chain reaction in which the user will instantly end up at the top of the page.

Demo in js-fiddle

Now what would be the simplest way to solve that problem?

d_inevitable
  • 4,381
  • 2
  • 29
  • 48

3 Answers3

10

It is possible to change the state of the URL with HTML5 history, without triggering the browser to follow the new state. This is not supported by all browsers.

Using history.replaceState() has the additional benefit that when the user uses the back button of the browser it will not just scroll up first.

$(window).on('activate.bs.scrollspy', function (e) {
    history.replaceState({}, "", $("a[href^='#']", e.target).attr("href"));
});

See working js-fiddle.

d_inevitable
  • 4,381
  • 2
  • 29
  • 48
10

For more cross-browser hash update you can use this JS:

$(window).on('activate.bs.scrollspy', function(e) {
  var $hash, $node;
  $hash = $("a[href^='#']", e.target).attr("href").replace(/^#/, '');
  $node = $('#' + $hash);
  if ($node.length) {
    $node.attr('id', '');
  }
  document.location.hash = $hash;
  if ($node.length) {
    return $node.attr('id', $hash);
  }
});

It removes temporarily the searched hash than adds it via the window.location and then restores hash in question. Unfortunately I don't know the exact compatibility range for this solution but IE9 is supported for sure and probably all older versions on IE as well (I don't care about older browsers in my projects so I didn't test this solution).

jmarceli
  • 19,102
  • 6
  • 69
  • 67
  • I'd improve this by using `location.replace` so that you don't spam the users history with this. – Nemo64 Sep 22 '15 at 11:30
  • As far as I know `location.replace` will reload the page which is not a desirable behavior. – jmarceli Jan 28 '17 at 11:54
  • The behavior is identical to that of clicking a link. But we can just try it ;). Just executing `location.replace('#foo')` and the url will change while the page wont reload. – Nemo64 Feb 13 '17 at 10:52
  • Not sure what 'target' was supposed to be but using Bootstrap 5 there was an easier way with relatedTarget: `$hash = e.relatedTarget.replace(/^#/, '');` – Nathan Jan 18 '22 at 04:26
6

I use this for Bootstrap v4:

$(window).on('activate.bs.scrollspy', function(e) {
    history.replaceState({}, "", $('.nav-item .active').attr("href"));
});
dferenc
  • 7,918
  • 12
  • 41
  • 49
Someone
  • 61
  • 1
  • 1