Prevent anchor tag to jump

Question

It is my first post on SO, I am using it already quite a while, always found a solution via search. Now I'm starting to dig deeper into programming - right now learning Java Script - and I couldn't find the exact answer for my beginner problem:

I've created a simple photo gallery where the thumbnails point to the image via href. The images are not displayed by default. By clicking on a thumbnail, the corresponding image appears thanks to the :target pseudo element. This way I can bypass the cascading nature of my HTML structure and address elements higher in hierarchy.

See fiddle:

https://jsfiddle.net/ahu1kaqf/

The problem is, that this "hack" has the side effect of putting the image to the very top of the window due to its default anchor jump behavior. So what I want to accomplish is to turn off or bypass just the jump behavior. Therefore, solutions with JS like "preventDefault" or "return false" are not suitable as they turn off the complete anchor behavior. My idea was to read the yScroll position just before the click and pass it to another function which triggers just after the page jump. By appending an onclick event on the anchor tag I found out that the function executes before the actual jump and I can read the current scrollY position:

function posY(){
  console.log(window.scrollY);
  scry = window.scrollY;
}

Then, after the anchor event has finished, I would like to pass the variable scry to another function which triggers just after the anchor jump to undo the jump:

function undoJump(){
  window.scrollTo(0, scry);
}

It doesn't really work with a click event as the function triggers before the actual jump.

The js code in the fiddle is in script tags because putting just the functions into the js window (of course without script tags) shows an error in the console, I don't know why...

Sorry, I'm really a beginner, thank you all for your help!

Answer 1

https://jsfiddle.net/ahu1kaqf/1/

var classname = document.getElementsByClassName("thumb");
for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener("click", posY);
}
function posY(e){
  e.preventDefault();
  console.log(window.scrollY);
}

Remove the onclick as it's just not the best way to do it. Add a class to the links OR use querySelectorAll based on the parent class. The benefit here is, you don't have to remember to add a class or a onclick . It's less code to deal with and easier to manage.

https://jsfiddle.net/ahu1kaqf/2/

In either case, you can stop the normal event behavior with e.preventDefault() ;

For the second part, you'll probably just want to set a global in this case. Set a global outside all of the functions and change it on click. You could probably get more complex with objects, and promises and such, but, honestly, it'd be just as easy to set a global value. It's good to try to avoid them, but they can be simple useful solutions depending on the overall complexity of the application in question.

Answer 2

Yes, you need to prevent the default action (which is a navigation action).

In modern browsers, that means you can do this (note I'm passing the global event object as a parameter):

<a href="#img1" onclick="posY(event)"><div class="thumb">thumb1</div></a> 

Then in your js code you can do this:

function posY(e){
      e.preventDefault()
      console.log(window.scrollY);
  }