向下滚动到网页上不同 div 部分的 html/css 按钮答案

【问题标题】：html/css buttons that scroll down to different div sections on a webpage向下滚动到网页上不同 div 部分的 html/css 按钮
【发布时间】：2013-04-27 07:13:27
【问题描述】：

有人可以帮我搜索css/html 代码示例：

我有一个带有 3 个按钮（顶部、中间、底部）的网页，每个按钮都指定为我页面上的 1 个 div 部分，假设我的第一个 div 部分位于该页面的中间div id='middle'。

如果我点击这个按钮（中间），我的页面会自动从顶部向下滚动我的页面到div #middle 部分。

引用 div id='top' 和 div id='bottom' 的其他按钮相同

谢谢转发！我真的无法在互联网上找到任何解决方案。

有没有办法让我的按钮列表保持在固定位置，这样它就可以在屏幕上显示移动部分？

【问题讨论】：

您是在寻找需要 JavaScript 的动画滚动，还是由书签锚点引起的标准跳转行为？
我需要一个简单的跳跃动作，但已经有人给了我答案，谢谢。

标签： css html button scroll

【解决方案1】：

试试这个：

<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />

【讨论】：

好多了，@Magicode 它也适用于 div 和几乎所有其他元素。
我们可以在课堂上这样做吗？ class='中间'
@jned29 类预计会在多个元素中普遍使用。这不是一个好主意。
遗憾的是，浏览器支持仍然有点弱，特别是如果您想使用“平滑”选项。 caniuse.com/#feat=scrollintoview
出色的答案..它没有在任何地方提及

【解决方案2】：

对于一些非常基本的东西，使用这个：

<a href="#middle">Go To Middle</a>

或者对于 javascript 中的一些简单的东西，请查看这个 jQuery 插件 ScrollTo。对于平滑滚动非常有用。

【讨论】：

太棒了！很高兴我能帮助你。请选择答案？

【解决方案3】：

有一种更简单的方法可以在没有 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>
</html

“滚动行为”告诉页面它应该如何滚动，并且比使用 javascript 容易得多。 Javascript 将在速度和流畅度方面为您提供更多选择，但这将提供没有所有令人困惑的代码。

【讨论】：

没问题！很高兴我能帮上忙！
谢谢！帮助我建立我的网站 :)

【解决方案4】：

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; 
}

示例 http://jsfiddle.net/x4wDk/

【讨论】：

最后 3 个使用 id="top" 不是更好吗？
@steebchen, Nooo... 这将完全破坏程序，因为第一个链接将链接到 3 个元素而不是一个元素，而其他链接什么也不做。
@edwardtyl 我不知道我为什么写这篇评论。我确定我的意思是不同的，但我不记得了^^

【解决方案5】：

试试这个：

<a href="#To top">Scroll to top</a>

如果你想要平滑滚动：

html {
  scroll-behavior: smooth;
 }

【讨论】：