如何使按钮在 HTML 中向下滚动页面?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19797139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a button scroll down page in HTML?
提问by user2907241
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. .
类似于“滚动到顶部”,但我可以决定滚动页面的位置,如中间、顶部、底部等。
回答by Charles
Update:There is now a better way to use this, using the HTML id
attribute:
更新:现在有一个更好的方法来使用它,使用 HTMLid
属性:
Set the destination id: <h1 id="section1">Section 1</h1>
设置目标ID: <h1 id="section1">Section 1</h1>
And create a link to that destination using the anchor tag: <a href="#section1">Go to section 1</a>
并使用锚标记创建指向该目的地的链接: <a href="#section1">Go to section 1</a>
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!
这种新方法的好处是id
可以在任何 HTML 元素上设置该属性。您不必再在目标链接周围包裹多余的锚标签了!
Original answer:
原答案:
You can look at using the HTML anchor tag.
您可以查看使用 HTML 锚标记。
<a name="section1">Section 1</a>
<a name="section1">Section 1</a>
alongside
旁边
<a href="#section1">Go to section 1</a>
<a href="#section1">Go to section 1</a>
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.
当用户单击“转到第 1 部分”时,他们将被发送到显示“第 1 部分”文本的页面部分。
回答by Divyesh Kanzariya
using window.scrollTo
you can scroll down your page like this
使用window.scrollTo
您可以像这样向下滚动页面
window.scrollTo(0,document.body.scrollHeight);