Search code examples
csshtmlbuttonscroll

html/css buttons that scroll down to different div sections on a webpage

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?

Solution

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