如何在 html 中创建一个按钮链接，它将带您到同一页面的不同部分
[英]How to create a button link in html which will take you to a different section of the same page
问题描述
I wanted to make a button which when clicked will take you to a different section of the same page but not a different page.
我想制作一个按钮，单击该按钮时会将您带到同一页面的不同部分，但不会转到不同的页面。 The button will take you to the particular section of the same page instead of you scrolling down the page.该按钮会将您带到同一页面的特定部分，而不是向下滚动页面。
3 个解决方案
解决方案1
0 2020-11-07 15:28:58
For example, on your home page, there is an About Us section and you want the visitors to go to the About Us section by clicking a button/link.例如，在您的主页上，有一个关于我们部分，您希望访问者通过单击按钮/链接转到关于我们部分。 You can set the id in your About Us section.您可以在“关于我们”部分设置 ID。 Like this :像这样 ：
<div id="about">This is About Us Section<div>
And can use this link :并且可以使用这个链接：
<a href="#about"></a>
For smooth scrolling behaviour you can set :为了平滑滚动行为，您可以设置：
html { scroll-behavior: smooth;}
解决方案2
0 2020-11-07 15:29:44
Maybe you're looking for scrollTo() method也许您正在寻找 scrollTo() 方法
Using JavaScript, to scroll to specified coordinates:使用 JavaScript 滚动到指定坐标：
function scrollWin() {
window.scrollTo(h{int}, y{int});
}
And the button looks likes:按钮看起来像：
<button onclick="scrollWin()">Scroll to {Section}</button>
解决方案3
0 2020-11-07 15:31:04
If you want to use Button not Link as you write then you can add the button in form element with url to the same page and the anchor, as in the code example below.如果您想在编写时使用 Button 而不是 Link，那么您可以将带有 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.