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 · 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_

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_

<html>_x000D_
  <a href="#down">Click Here to Smoothly Scroll Down</a>_x000D_
  <div id="down">_x000D_
    <h1>You are down!</h1>_x000D_
  </div>_x000D_
</html

_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

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

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

User · Answer

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

[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