Target goes to the top of the page

[rodolpheb]

Hi everyone,

I’m struggling with the :target property in pure CSS.

http://codepen.io/anon/pen/udGir

When I click on the first link the anchor goes to the top which is a normal comportment.

I’d like the content to stay still when :target is activated.

I tried with pseudo-elements even combining them with :target but was unsuccessful.

Thanks for your answers.

[Merri]

In pure CSS you can fight against it only by using some extra elements that have a fixed position: http://codepen.io/Merri/pen/cehAq

Another alternative is JavaScript window.history.pushState but as I haven’t used it much before I didn’t get it to trigger CSS :target change, only to change the hash in the address bar.

[rodolpheb]

Thanks Merri, your a genius.

I’ve already tried with fixed position but not in that way.

[rodolpheb]

Solved

[noahgelman]

Are you talking about the little bouncing the page does when you click your link?

That only happens in codepen. It won’t jump like that on a normal web page.

[rodolpheb]

I don’t think so.

I first tried on a normal web page.

[Author]

Posts