提问者:小点点

如何在html中创建一个按钮链接,它将把你带到同一个页面的不同部分


我想做一个按钮,当点击将带你到同一页的不同部分,但不是一个不同的页面。该按钮将带您到同一页面的特定部分,而不是您向下滚动页面。


共3个答案

匿名用户

例如,在您的主页上,有一个关于我们的部分,您希望访问者通过单击按钮/链接进入关于我们的部分。您可以在“关于我们”部分中设置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>