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

Question

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

我有一个网页,其中有3个按钮(顶部,中间,底部),每个按钮指定在我的页面上的1 div部分,让我说我的第一个div部分位于该页面的中间div id='middle'.

如果我单击此按钮(中间),我的页面将自动从页面顶部向下滚动到该div #middle部分.

同样的其他按钮指的是div id='top'和divid='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将为您提供更多关于速度和平滑度的选择，但这将在没有所有令人困惑的代码的情况下实现。