The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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.

    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:

    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


    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed