[Solved] Anchoring to the same page [closed]

by


I would do the scrolling using jQuery and changing the anchors in the URL to elements that don’t exist on the DOM with the same value for id or name. (so that the scroll is not done automatically)

Living demo

$(window).on('hashchange',function(){
    //you can see it manually or calculate it using jQuery by using $.height();
    var header = 60; 

    //Getting the anchor and replacing the underscore
    var value =  window.location.hash.replace('_', ''); 

    //getting our destination     
    var dest = $(value).position();

    //if the element exist on the DOM
    if(typeof dest !== "undefined"){
         var dtop = dest.top;

         //proceeding to scroll
         $('html, body').animate({
            scrollTop: dtop - header
        }, 1000);

    }
});

The links in my example look like #_link1 and the id needed to appear in the DOM should be like id="link1:

<div id="menu">
    <a href="#_link1">Link 1</a>
    <a href="#_link2">Link 2</a>
    <a href="#_link3">Link 3</a>
</div>
...
<h1 id="link1>Link 1</h1>

Of course, you can change the underscore (_) on the URL for any other character or symbol you want. Just make sure to replace it for an empty string on the replace statement of the code I provided.

solved Anchoring to the same page [closed]