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    lt ul gt       lt li gt  lt a href   one  gt One lt  a gt  lt  li gt       lt li gt  lt a href   two  gt Two lt  a gt  lt  li gt       lt li gt  lt a href   three  gt Three lt  a gt  lt  li gt   lt  ul gt    lt div class  wrap  gt       lt a name  one  gt text 1 lt  a gt       lt a name  two  gt text 2 lt  a gt       lt a name  three  class  box  gt text 3 lt  a gt   lt  div gt    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    lt a onclick  jumpto  one     gt One lt  a gt    what will be the same like before  It will add the hash to the url  I also added   lt a onclick  jumpto  one    return false   gt    without success  So if there is someone who could tell me how to solve this I really would appreciate   Thanks a lot

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

User · Answer

Because when you do   window location href       anchor    You load a new page  you can do    lt a href     onclick  jumpTo  one     gt One lt  a gt   lt a href     id  one  gt  lt  a gt    lt script gt       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            lt  script gt

User · Answer

Not 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 bare 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  quot   quot    hash

User · Answer

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     lt button onclick  myFunction    gt Load Prompt lt  button gt   lt span id  test100  gt  lt h4 gt Hello lt  h4 gt  lt  span gt    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    gt   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   lt a href   test100  gt Test link lt  a gt    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

User · Answer

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

[javascript] anchor jumping by using javascript

Examples related to javascript

Examples related to html

Examples related to function

Examples related to anchor

Examples related to href