0

Sorry for the title, wasn't sure how to word this.

I have a nav menu at the top of my page. Clicking on each link will scroll to the targeted element. It also appends #sectionname to the URL. Everything works great in Chrome. The problem I'm having is that the menu itself is static, so when I initiate the scroll I'm offsetting the menu height. Again, works great in Chrome, but in IE and FF it scrolls to where I want it then immediately jumps back to the top of the element minus the offset.

Here is the code:

$('.nav').on('click', function (e) {
    e.preventDefault();
    var target = $(this).data('target');
    $('html, body').stop().animate({
        scrollTop: $(target).offset().top - 77          //should actually be 78 (height of the header, but IE has a 1px discrepancy.
    }, 800, 'swing', function () {
        window.location.hash = target;                  //causes IE and FF to jump back to the original top without the header offset.
    });
});

How can I keep IE and FF from immediately processing the new URL? Or is there a better way to do this?

1 Answers1

1

You can use history.replaceState() to modify address string see history.replaceState() example?

history.replaceState({}, target.slice(1), target);
Community
  • 1
  • 1
guest271314
  • 1
  • 15
  • 104
  • 177