时间戳

首页 > 解决方案 > 使用 CSS 滚动行为时如何从 URL 中删除#id

javascript - 使用 CSS 滚动行为时如何从 URL 中删除#id

问题描述

在我的网站上，我有一个 Scroll to Top 部分。但由于大多数网站通过 实现这一点jQuery scrollTop，我使用了最新的 CSS scroll-behavior: smooth;。现在它的工作方式是我给我的body标签一个id blog.

例如<body id="blog">

和滚动到顶部按钮，如：

<a id="move-to-top" href="#blog">Scroll</a>

现在这工作得很好，我的网站上滚动流畅。但是，当任何人单击“滚动到顶部”按钮时，URL 都会受到#blog我不喜欢的处理。

#blog我想知道当任何人点击按钮时，是否有任何方法可以取出URL。

如果我执行以下操作：

document.getElementById("move-to-top").addEventListener( "click", (e) => {
  e.preventDefault()
} )

滚动到顶部停止工作，因为我正在阻止默认设置。我不知道我还能怎么做。任何指导都会有所帮助。

标签： javascriptjquerycss

解决方案

您可以使用 JQuery 动画功能

$('html,body').animate({scrollTop: $("#blog").offset().top},'slow');

或者你可以使用 JavaScript scrollIntoView

document.getElementById('blog').scrollIntoView(true);

从 henser那里得到答案

如果您只是想从 URL 中删除#tag，您可以使用历史记录替换状态

document.getElementById("move-to-top").addEventListener( "click", (e) => {
  history.replaceState([],"",window.location.href.split('#')[0])
});

推荐阅读