Jump Links not working on my Website

Question

For my website, I have a one page system as the index to showcase several different parts of my portfolio. In my designs section I have categories that visitors can click on which will take them to another page. On that page I have a "back" button when they click, it should take them back to the index and scroll down to the designs area so that they don't have to scroll down again to look at another section.

Right now I have <a id="designs"></a> just above the div that I have my design category in.

On the category page that has the "back" button, the link is my URL with index.html#designs

Maybe I am doing this wrong but when I reload the page, it goes to the position I want for like a milisecond, and then it scrolls to the top.

Is there any way to make it so that it will not scroll to the top of the page? I don't want it to be a challenge for people to view my portfolio.

Thanks so much!

Answer 1

Try to use e.preventDefault() :

$('#designs').click(function(e) {
     e.preventDefault();
});

This selector only target the #designs anchor. You can give all of your expected anchors a common class such as class="anchors" then you can do:

$('.anchors').click(function(e) {
     e.preventDefault();
});  

Answer 2

You need to change your html like,

<!-- add href like #designs -->
<a href="#designs">Design</a>

<!-- div design having id designs which you want to show on top -->
<div id="designs">Design div</div>

Demo