Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 746
JayD Avatar asked May 02 '13 23:05

JayD


People also ask

How do I scroll to a specific div in HTML?

If you want to scroll the current document to a particular place, the value of HREF should be the name of the anchor to which to scroll, preceded by the # sign. If you want to open another document at an anchor, give the URL for the document, followed by #, followed by the name of the anchor.

How do I split a website into different sections in CSS?

The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). Div tag has both open(<div>) and closing (</div>) tag and it is mandatory to close the tag.

How do you make a scrollable section in HTML?

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.


1 Answers

try this:

<input type="button" onClick="document.getElementById('middle').scrollIntoView();" /> 
like image 161
Waqleh Avatar answered Sep 22 '22 13:09

Waqleh