我想做一个按钮,当点击将带你到同一页的不同部分,但不是一个不同的页面。该按钮将带您到同一页面的特定部分,而不是您向下滚动页面。
例如,在您的主页上,有一个关于我们的部分,您希望访问者通过单击按钮/链接进入关于我们的部分。您可以在“关于我们”部分中设置id。像这样:
<div id="about">This is About Us Section<div>
并可以使用此链接:
<a href="#about"></a>
对于平滑滚动行为,您可以设置:
html { scroll-behavior: smooth;}
可能您正在寻找scrollTo()方法
使用JavaScript,滚动到指定坐标:
function scrollWin() {
Window.ScrollTo(h{int},y{int});}
按钮看起来像:
null
<button onclick="scrollWin()">Scroll to {Section}</button>
如果您希望在编写时使用Button而不是Link,那么您可以将Button in form元素与url添加到相同的页面和锚点,如下面的代码示例所示。
<html>
<head>
<title>Page</title>
</head>
<body>
<form method="get" action="#anchor">
<button type="submit">Button</button>
</form>
<div style="height:900px;"></div>
<p id="anchor">Paragraph 1</p>
<div style="height:900px;"></div>
</body>
</html>