Question: I have a sliding panel set up on my website.

When it finished animating, I set the hash like so

```
function() {
   window.location.hash = id;
}

```

(this is a callback, and the `id` is assigned earlier).

This works good, to allow the user to bookmark the panel, and also for the non JavaScript version to work.

However, when I update the hash, the browser jumps to the location. I guess this is expected behaviour.

My question is: how can I prevent this? I.e. how can I change the window's hash, but **not** have the browser scroll to the element if the hash exists? Some sort of `event.preventDefault()` sort of thing?

I'm using jQuery 1.4 and the [scrollTo plugin](http://plugins.jquery.com/project/ScrollTo).

Many thanks!

Update
------

Here is the code that changes the panel.

```
$('#something a').click(function(event) {
    event.preventDefault();
    var link = $(this);
    var id = link[0].hash;

    $('#slider').scrollTo(id, 800, {
        onAfter: function() {

            link.parents('li').siblings().removeClass('active');
            link.parent().addClass('active');
            window.location.hash = id;

            }
    });
});

```

Answer: 
The problem is you are setting the **window.location.hash** to an element's ID attribute. It is the expected behavior for the browser to jump to that element, regardless of whether you "preventDefault()" or not.

One way to get around this is to prefix the hash with an arbitrary value like so:

```
window.location.hash = 'panel-' + id.replace('#', '');

```

Then, all you need to do is to check for the prefixed hash on page load. As an added bonus, you can even smooth scroll to it since you are now in control of the hash value...

```
$(function(){
    var h = window.location.hash.replace('panel-', '');
    if (h) {
        $('#slider').scrollTo(h, 800);
    }
});

```

If you need this to work at all times (and not just on the initial page load), you can use a function to monitor changes to the hash value and jump to the correct element on-the-fly:

```
var foundHash;
setInterval(function() {
    var h = window.location.hash.replace('panel-', '');
    if (h && h !== foundHash) {
        $('#slider').scrollTo(h, 800);
        foundHash = h;
    }
}, 100);

```
This solution worked for me. 

The problem with setting `location.hash` is that the page will jump to that id if it's found on the page.

The problem with `window.history.pushState` is that it adds an entry to the history for each tab the user clicks. Then when the user clicks the `back` button, they go to the previous tab. (this may or may not be what you want. it was not what I wanted).

For me, `replaceState` was the better option in that it only replaces the current history, so when the user clicks the `back` button, they go to the previous page.

```
$('#tab-selector').tabs({
  activate: function(e, ui) {
    window.history.replaceState(null, null, ui.newPanel.selector);
  }
});

```

Check out the [History API docs](https://developer.mozilla.org/en-US/docs/Web/API/History_API) on MDN.