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?
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;
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_
} <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_
</htmlThe "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.
try this:
<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />
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/
Source: Stackoverflow.com