单击滚动按钮时，不想将锚href添加到URL

问题描述

我正在构建一个单页网站，它将有一个登录页面和一个主页，用户可以在其中进行一些计算。在登录页面中，有一个用于平滑滚动到主页的按钮。在研究如何制作滚动内容时，我发现名为scroll-behavIoUr的CSS属性与锚点一起使用。

我对这种方法不满意的是，当我单击锚点按钮时，滚动div的ID附加到了URL。见下面的片段：

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

#landing-page {
    background-color: bisque;
    height: 100vh;
}

#main-page {
    background-color: yellow;
    height: 100vh;
}

<div id="container">
    <div id="landing-page">
        <h1>Landing Page</h1>
        <a href="#main-page">Go to main page</a>
    </div>
    <div id="main-page">
        <h1>Main Page</h1>
    </div>
</div>

当我单击按钮时，它滚动到正确的视口，但URL从localhost:1234/#main-page变成localhost:1234。听起来似乎不必要的担忧，我真的想防止这种情况。有什么我可以做的，还是应该完全更改滚动方式（不使用锚点）？

解决方法

是的，如果您不想更改URL，则必须使用javascript滚动到该元素。像这样：

document.getElementById("anchorElement").addEventListener("click",e => {
    document.getElementById("main-page").scrollIntoView();
})

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

#anchorElement {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

#landing-page {
    background-color: bisque;
    height: 100vh;
}

#main-page {
    background-color: yellow;
    height: 100vh;
}

<div id="container">
    <div id="landing-page">
        <h1>Landing Page</h1>
        <span id="anchorElement">Go to main page</span>
    </div>
    <div id="main-page">
        <h1>Main Page</h1>
    </div>
</div>