Question

Let´s say I have following mark up and CSS:

HTML:

<div id="Container">
  <div id="Content">
    [* some text *]
  </div>
</div>

CSS:

#Container {
  height: 400px;
  overflow: scroll;
}

#Content {
  height: 800px;
}

Obviously this set up invokes a scrollbar to possibly scroll down 400px. I created a jsFiddle for a better understanding.

Is there a way to jump to the second paragraph by CSS only?

I added a javascript command to demonstrate what I want to achieve. Just uncomment and run it.

There are two things that I have tried so far, but in both cases I was not able to scroll up anymore:

• Setting the margin-top attribute of the inner div container to -180px
• Setting the inner div container to position: absolute and top: -180px

Note: I do not care for the paragraph or any content. This is just an example. I want to jump to an arbitrary position.

Edit:

Anchor tags are not an option. I do not want to flood my mark up with unnecessary tags.

Answer 1

How about the humble ‘a’ tag?

   <a href="#one">jump to one</a>
   <a href="#two">jump to two</a>


   <a name="one">this is one</a>
   <a name="two">this is two</a>