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

Question

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

User · Accepted Answer

For something really basic use this    lt a href   middle  gt Go To Middle lt  a gt    Or for something simple in javascript check out this jQuery plugin ScrollTo  Quite useful for scrolling smoothly

User · Answer

There is a much easier way to get the smooth scroll effect without javascript   In your CSS just target the entire html tag and give it scroll-behavior  smooth   x000D   x000D  html   x000D    scroll-behavior  smooth  x000D     x000D    x000D   a   x000D    text-decoration  none  x000D    color  black  x000D      x000D    x000D    down   x000D    margin-top  100   x000D    padding-bottom  25   x000D      x000D   lt html gt  x000D     lt a href   down  gt Click Here to Smoothly Scroll Down lt  a gt  x000D     lt div id  down  gt  x000D       lt h1 gt You are down  lt  h1 gt  x000D     lt  div gt  x000D   lt  html x000D   x000D   x000D    The  scroll-behavior  is telling the page how it should scroll and is so much easier than using javascript  Javascript will give you more options on speed and the smoothness but this will deliver without all of the confusing code

User · Answer

try this    lt input type  button  onClick  document getElementById  middle   scrollIntoView       gt

User · Answer

HTML   lt a href   top  gt Top lt  a gt   lt a href   middle  gt Middle lt  a gt   lt a href   bottom  gt Bottom lt  a gt   lt div id  top  gt  lt a href  top  gt  lt  a gt Top lt  div gt   lt div id  middle  gt  lt a href  middle  gt  lt  a gt Middle lt  div gt   lt div id  bottom  gt  lt a href  bottom  gt  lt  a gt Bottom lt  div gt    CSS   top  middle  bottom      height  600px      width  300px      background  green       Example http   jsfiddle net x4wDk

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

Examples related to css

Examples related to html

Examples related to button

Examples related to scroll