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:

<ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
</ul>

<div class="wrap">
    <a name="one">text 1</a>
    <a name="two">text 2</a>
    <a name="three" class="box">text 3</a>
</div>

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:

<a onclick="jumpto('one');">One</a>

what will be the same like before. It will add the hash to the url. I also added

<a onclick="jumpto('one'); return false;">

without success. So if there is someone who could tell me how to solve this I really would appreciate.

Thanks a lot.

Solution 1

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.)}

Solution 2

I think it is much more simple solution:

window.location = (""+window.location).replace(/#[A-Za-z0-9_]*$/,'')+"#myAnchor"

This method does not reload the website, and sets the focus on the anchors which are needed for screen reader.

Solution 3

I don't have enough rep for a comment.

The getElementById() based method in the selected answer won't work if the anchor has name but not id set (which is not recommended, but does happen in the wild).

Something to bear in mind if you don't have control of the document markup (e.g. webextension).

The location based method in the selected answer can also be simplified with location.replace:

function jump(hash) { location.replace("#" + hash) }

Solution 4

Because when you do

window.location.href = "#"+anchor;

You load a new page, you can do:

<a href="#" onclick="jumpTo('one');">One</a>
<a href="#" id="one"></a>

<script>

    function getPosition(element){
        var e = document.getElementById(element);
        var left = 0;
        var top = 0;

        do{
            left += e.offsetLeft;
            top += e.offsetTop;
        }while(e = e.offsetParent);

        return [left, top];
    }

    function jumpTo(id){    
        window.scrollTo(getPosition(id));
    }

</script>

Solution 5

I have a button for a prompt that on click it opens the display dialogue and then I can write what I want to search and it goes to that location on the page. It uses javascript to answer the header.

On the .html file I have:

<button onclick="myFunction()">Load Prompt</button>
<span id="test100"><h4>Hello</h4></span>

On the .js file I have

function myFunction() {
    var input = prompt("list or new or quit");

    while(input !== "quit") {
        if(input ==="test100") {
            window.location.hash = 'test100';
            return;
// else if(input.indexOf("test100") >= 0) {
//   window.location.hash = 'test100';
//   return;
// }
        }
    }
}

When I write test100 into the prompt, then it will go to where I have placed span id="test100" in the html file.

I use Google Chrome.

Note: This idea comes from linking on the same page using

<a href="#test100">Test link</a>

which on click will send to the anchor. For it to work multiple times, from experience need to reload the page.

Credit to the people at stackoverflow (and possibly stackexchange, too) can't remember how I gathered all the bits and pieces. ☺

View more solutions

Comments

[Jeff]

Not sure about this, but you could try manually writing to the hash property after the jump. For example set a timeout in the onclick handler which sets window.location.hash=''.

[Roger Ng]

Do you mean you don't want to have the # shown in the URL when jumping to another section in the same webpage?

[Frank van Puffelen]

In that case you will either have to manipulate the scrollTop of the window, typically by window.scrollTo or the corresponding jQuery helper: stackoverflow.com/questions/6677035/jquery-scroll-to-element or stackoverflow.com/questions/500336/…

[Derek 朕會功夫]

@Jeff - If you do location.hash='', the # remains there.

[Marco Sulla]

Do not do that, please. Hashes are good when saving the page in your bookmarks.

[Dylan Smith]

Perhaps worth noting that the name attribute of anchor tags is deprecated. You should use id instead.

[Derek 朕會功夫]

I don't think adding hashes makes it a new page.

[Derek 朕會功夫]

It doesn't reload the page.

[Jonathan Vukovich-Tribouharet]

You're right it doesn't reload page. I try in console with chrome and the favicon is reloaded.

[Beejor]

In the latest Firefox, hash changes seem to force a reload for iFrames (in the src attribute). I'd consider this a browser bug, but something to be aware of.

[Mawg says reinstate Monica]

Rats!! The link is broken :-( I thought that JS Fiddles stayed there forever

[Derek 朕會功夫]

@Mawg Apparently they have removed the ability to use add /show at the end of the url.

[Josh]

"Even IE6 supports this" is the best comment I've ever seen.

[Adam111p]

And what rarely works on IE ,this works on all IE ;)

[Juan Mendez]

@Derek朕會功夫 do you have a case of Mondays? (profile picture from Office Space movie)

[Alex]

I ended up with window.location = window.location.origin + window.location.pathname + '#hash';

[Derek 朕會功夫]

@JuanMendez Yes :)

[liang]

I think the "complicated" way is even easier than the simple way. I prefer the scrolling than tag

[Black]

.scrollIntoView does not seem to work with a Jquery Element.

[Derek 朕會功夫]

@Black There are no such thing as a “jQuery” element. If you want to get the first element out from your query, do $(mySelector)[0].scrollIntoView().

[Derek 朕會功夫]

@Black I’m not sure what you mean by “hidden elements” either. All elements in your DOM subclass from HTMLElement which definitely contains the .scrollIntoView method.

[Black]

@Derek朕會功夫, I mean elements which have the attribute hidden. e.g. <p id='goToTop' hidden></p>

[Derek 朕會功夫]

@Black You might want to redesign your page if you need to jump to a hidden element.

[Black]

@Derek朕會功夫, what are the reasons why this is bad?

[Derek 朕會功夫]

Let us continue this discussion in chat.

[HoldOffHunger]

This reloaded the page for me. Accepted answer ended up working, though, I wish it was shorter.

[Yay295]

1+ for scrollIntoView. 1- for mentioning it last.

[davidanderle]

I find the "window.scrollTo(0, element.offsetTop)" method the best as it works perfectly with windows not on full screen (unlike scrollIntoView()). Also, this function alignes the element to the very top of the screen, making it easier to spot the change.

[Gustavo Rodríguez]

I couldn't make this to work. For some reason in my system / case document.getElementById(h).offsetTop return wrong values all the time. So I went the Jquery way: window.scrollTo(0, $("#elem").offset());