Prevent jumping to anchor with CSS

| permalink | css

When you click on an anchor link, such as <a href="#target">Anchor Link</a>, the viewport will jump to the anchor in question.

This is usually the desired behavior, but what if you don't want the browser to do that?

This might be the case if you're hacking the anchor link to create CSS :target logic, and set up CSS only tabs.

As long as you don't care if the anchor itself is visible, you can keep the CSS :target logic and prevent jumping to the target anchor by using either display:none or position:fixed.

The first method removes the anchor from the viewport, while the second method locks the target to the current scroll position.