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 · 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:

<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. ?

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

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

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

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

[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