Question

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

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

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

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

相同

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

有没有办法让我的按钮列表保持在一个固定的位置，以便它保持在屏幕上穿过各个部分？

Answer 1

试试这个：

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

Answer 2

对于一些非常基本的东西：

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

或者对于javascript中的简单内容，请查看此jQuery插件ScrollTo。非常适合滚动顺畅。

Answer 3

<强> 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/

Answer 4

有一种无需JavaScript即可获得平滑滚动效果的简便方法。在您的CSS中，只需定位整个html标记并为其赋予滚动行为即可：

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将为您提供更多关于速度和平滑度的选择，但这将在没有所有令人困惑的代码的情况下实现。

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

4 个答案: