35

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

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

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

id='top'与 div和 div相关的其他按钮相同id='bottom'

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

有没有办法将我的按钮列表保持在固定位置，以便在浏览部分时保持在屏幕上？

4

5 回答 5

46

尝试这个：

<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />
于 2013-05-02T23:47:54.103 回答
41

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

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

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

于 2013-05-02T23:48:52.513 回答
28

有一种更简单的方法可以在没有 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 将为您提供更多关于速度和流畅性的选项，但这将提供没有所有令人困惑的代码。

于 2018-12-12T16:02:24.037 回答
14

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/

于 2013-05-02T23:54:25.537 回答
1

尝试这个：

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

如果你想要平滑滚动：

html {
  scroll-behavior: smooth;
 }
于 2021-08-17T14:46:46.220 回答