如何在HTML中创建一个按钮滚动页面?

Couldn't find a tutorial for this anywhere or just didn't use the right keywords. I'm making a one-paged website, and I'd like the navigation bar buttons to scroll the page up/down to the right part. Would this be possible in just HTML and CSS?
I'm not so experienced with JavaScript.

在任何地方都找不到这方面的教程，或者只是没有使用正确的关键字。我正在做一个单页的网站，我想要导航栏按钮滚动页面向上/向下到正确的部分。这在HTML和CSS中可能吗?我对JavaScript不太熟悉。

Similar to ''Scroll to the top'' but that I could decide to where it scrolls the page, like middle, top, bottom etc. .

类似于“滚动到顶部”，但我可以决定它在哪里滚动页面，像中间，顶部，底部等等。

2 个解决方案

#1

Update: There is now a better way to use this, using the HTML id attribute:

更新:现在有一种更好的方法来使用它，使用HTML id属性:

Set the destination id: <h1 id="section1">Section 1</h1>

设置目标id:

Section 1

And create a link to that destination using the anchor tag: <a href="#section1">Go to section 1</a>

并使用锚标签:创建到目的地的链接到section1

The benefit of this new method is that the id attribute can be set on any HTML element. You don't have to wrap superfluous anchor tags around destination links anymore!

这种新方法的好处是可以在任何HTML元素上设置id属性。您不再需要在目标链接周围包装多余的锚标签了!

Original answer:

最初的回答:

You can look at using the HTML anchor tag.

您可以使用HTML锚标记。

<a name="section1">Section 1</a>

<一个名称= " section1> 第一节< / >

alongside

与

<a href="#section1">Go to section 1</a>

到section1 。

When the user clicks on "Go to section 1", they will be sent to the section of the page where the "Section 1" text is displayed.

当用户单击“Go to section 1”时，它们将被发送到显示“section 1”文本的页面部分。

#2

using window.scrollTo you can scroll down your page like this

使用窗口。可以像这样向下滚动页面

window.scrollTo(0,document.body.scrollHeight);