anchor jumping by using javascript

Question

I have a question that will be found very often. The problem is that nowhere can be found an explicit solution. I have two problems regarding anchors. The main goal should be to get a nice clean url without any hashes in it while using anchors to jump on a page. So the structure of the anchors is: ```

One
Two
Three

text 1 text 2 text 3

``` Okay, if you will click one of the links the url will automatically change to www.domain.com/page#1 At the end this should be just: www.domain.com/page So far, so good. Now the second thing is, when you search the internet for that problem you will find `javascript` as a solution. I have found this function: ``` function jumpto(anchor){ window.location.href = "#"+anchor; } ``` and calling that function with: ``` One ``` what will…

Accepted Answer

You can get the coordinate of the target element and set the scroll position to it. But this is so complicated.

Here is a lazier way to do that:

```
function jump(h){
    var url = location.href;               //Save down the URL without hash.
    location.href = "#"+h;                 //Go to the target element.
    history.replaceState(null,null,url);   //Don't like hashes. Changing it back.
}
```

This uses `replaceState` to manipulate the url. If you also want support for IE, then you will have to do it the complicated way:

```
function jump(h){
    var top = document.getElementById(h).offsetTop; //Getting Y of target element
    window.scrollTo(0, top);                        //Go there directly or some transition
}​
```

Demo: http://jsfiddle.net/DerekL/rEpPA/ Another one w/ transition: http://jsfiddle.net/DerekL/x3edvp4t/

You can also use `.scrollIntoView`:

```
document.getElementById(h).scrollIntoView();   //Even IE6 supports this
```

(Well I lied. It's not complicated at all.)

anchor jumping by using javascript

Solution

Problem

Related problems