css 自动滚动到页面顶部无效

tjjdgumg 于 2023-08-08 发布在其他

关注(0)|答案(2)|浏览(135)

我有一个滚动到顶部按钮固定在右下角我的网页。当它被点击时，我只想滚动到页面的顶部。
现在，我尝试了：

window.scrollTo(0,0)

window.scroll({
    top: 0,
    left: 0,
  })

document.body.scrollTop = 0
  document.documentElement.scrollTop = 0

document.querySelector('header').scrollIntoView({
 behavior: "smooth", block: "start", inline: "nearest"
})

的数据
所有这些作品在第一次但当我向下滚动，他们向上滚动页面一点点，然后停止。它们不会上升。
为什么会这样？
PS：我用的是 chrome

css

来源：https://stackoverflow.com/questions/76857819/auto-scrolling-to-the-top-of-the-page-doesnt-work

2条答案

按热度按时间

vuv7lop31#

根据@dkellner的评论，我认为这可能与流畅的行为有关，
当我在我的css代码中搜索它时，我发现我有这样一行：

* {
scroll-behavior: smooth;
}

字符串
我把它改成了

html {
scroll-behavior: smooth;
}

型
解决了这个问题
我知道给所有元素滚动行为：平滑没有意义，但我真的很想知道为什么它会导致这样的问题。

赞(0）回复(0）举报 2023-08-08

hkmswyz62#

使用JavaScript在单击“滚动到顶部”按钮时平滑地滚动到页面顶部。为了防止干扰固定按钮的定位，您可以暂时禁用按钮的位置：固定属性，然后重新启用它。

const scrollToTopButton = document.getElementById('scrollToTopButton'); 

scrollToTopButton.addEventListener('click', () => {
  scrollToTopButton.style.position = 'static'; 

  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth',
  });

  setTimeout(() => {
    scrollToTopButton.style.position = 'fixed'; // Re-enable fixed positioning after scrolling
  }, 1000); // Adjust the timing as needed
});

字符串

赞(0）回复(0）举报 2023-08-08

我来回答

css 自动滚动到页面顶部无效

2条答案

相关问题

热门标签

最新问答