向下滚动到网页上不同 div 部分的 html/css 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16349490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html/css buttons that scroll down to different div sections on a webpage
提问by JayD
Can someone help me I'm searching for css/htmlcode example:
有人可以帮助我我正在寻找css/html代码示例：
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'.
我有一个带有 3 个按钮（顶部、中间、底部）的网页，每个按钮都指定为我页面上的 1 个 div 部分，假设我的第一个 div 部分位于该页面的中间div id='middle'。
If I click this button(middle) my page would automatically scroll down from the top
of my page to the div #middlesection.
如果我单击此按钮（中间），我的页面会自动从页面顶部向下滚动到该div #middle部分。
same for the other buttons refered to div id='top', and div id='bottom'
引用 divid='top'和 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?
有没有办法让我的按钮列表保持在一个固定的位置，这样它在移动部分时就会留在屏幕上？
回答by Waqleh
try this:
尝试这个：
<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />
回答by rncrtr
回答by ihayes83
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;
有一种更简单的方法可以在没有 javascript 的情况下获得平滑的滚动效果。在您的 CSS 中，只需将整个 html 标签作为目标并赋予它 scroll-behavior: smooth;
html {
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: black;
}
#down {
margin-top: 100%;
padding-bottom: 25%;
} <html>
<a href="#down">Click Here to Smoothly Scroll Down</a>
<div id="down">
<h1>You are down!</h1>
</div>
</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.
“滚动行为”告诉页面它应该如何滚动，并且比使用 javascript 容易得多。Javascript 将为您提供更多关于速度和流畅度的选择，但这将提供所有令人困惑的代码。
回答by Kevin Bowersox
HTML
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
CSS
#top,#middle,#bottom{
height: 600px;
width: 300px;
background: green;
}
Examplehttp://jsfiddle.net/x4wDk/
