Grow your CSS skills. Land your dream job.

Target goes to the top of the page

  • # November 13, 2013 at 6:19 am

    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.

    # November 13, 2013 at 1:49 pm

    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.

    # November 13, 2013 at 1:55 pm

    Thanks Merri, your a genius.

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

    # November 13, 2013 at 2:01 pm

    Solved

    # November 14, 2013 at 5:36 pm

    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.

    # November 15, 2013 at 2:27 am

    I don’t think so.

    I first tried on a normal web page.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".