Is there a way to jump along the scrollbar using CSS only?

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:

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.

http://stackoverflow.com/questions/12238099/make-named-anchor-bookmarks-appear-always-at-top-of-the-screen-when-clicked — Jawad, Nov 19 '12 at 16:46
I'm a little confused as to why you think anchor tags would be "unnecessary markup". Since they would be performing their semantic function, it would seem that they are the correct way to do things. What is it about anchors (other than the fact you'd need to add them) that doesn't meet your use case? — dnagirl, Nov 19 '12 at 17:07
I don't believe you can modify the scroll position in CSS. You could do something with the margin, though. — Shmiddty, Nov 19 '12 at 18:24

Billy Moat · Accepted Answer · 2012-11-19T16:49:03.813

4

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>

edited Nov 19 '12 at 16:49

answered Nov 19 '12 at 16:40

Billy Moat

"Anchor tags are not an option. I do not want to flood my mark up with unnecessary tags" – Jawad Nov 19 '12 at 16:51
1

Yeah - I see now that he added that as an edit to his post after I had finished posting my answer. – Billy Moat Nov 19 '12 at 16:53

score 3 · Answer 2 · answered Nov 19 '12 at 16:42

3

Not with CSS, but with standard HTML/anchors.

<a href="#p2">paragraph 2</a>

Give your paragraph an ID and use the URL hash to say where to go to. I used an anchor as an example how to make it jump to the second paragraph.

answered Nov 19 '12 at 16:42

Eli Gassert

2 Answers2