Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Can someone help me I'm searching for css/html code example:

I have a webpage with 3 buttons(top, middle, bottom) each specified to 1 div section on my page, lets say my first div section is in the middle of that page div id='middle'.

If I click this button(middle) my page would automatically scroll down from the top of my page to the div #middle section.

same for the other buttons refered to div id='top', and div id='bottom'

Thanks in forward! I really couldnt find any solution on the internet.

Is there a way to keep my buttonlist on a fixed position so it stays on screen while moving through sections?

share|improve this question
Are you looking for an animated scroll that requires JavaScript, or the standard jump behavior caused by bookmark anchors? – j08691 May 3 at 0:00
I needed a simple jump action, but someone already gave me the answer thanks thou. – JayD May 3 at 3:25

3 Answers

up vote 1 down vote accepted

For something really basic use this:

<a href="#middle">Go To Middle</a>

Or for something simple in javascript check out this jQuery plugin ScrollTo. Quite useful for scrolling smoothly.

share|improve this answer
It works perfect thanks alot, just what I was looking for! – JayD May 3 at 1:31
Great! Glad I could help. Please select the answer? – rncrtr May 3 at 6:29
up vote 0 down vote

try this:

<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />
share|improve this answer
up vote 0 down vote

HTML

<a href="#top">Top</a>
<a href="#middle">Middle</a>
<a href="#bottom">Bottom</a>
<div id="top"><a href="top"></a>Top</div>
<div id="middle"><a href="middle"></a>Middle</div>
<div id="bottom"><a href="bottom"></a>Bottom</div>

CSS

#top,#middle,#bottom{
    height: 600px;
    width: 300px;
    background: green; 
}

Example http://jsfiddle.net/x4wDk/

share|improve this answer
Thanks for the code. – JayD May 3 at 1:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.