当前位置：首页 > JavaScript

js实现置顶

2026-03-01 04:07:30JavaScript

实现页面置顶的JavaScript方法

使用window.scrollTo()方法

window.scrollTo({
  top: 0,
  behavior: 'smooth' // 添加平滑滚动效果
});

使用document.documentElement.scrollTop

document.documentElement.scrollTop = 0;

使用锚点方式 在HTML中添加一个锚点元素：

js实现置顶

<a id="top"></a>

然后通过JavaScript跳转：

location.href = "#top";

添加返回顶部按钮 HTML部分：

js实现置顶

<button id="backToTop">返回顶部</button>

CSS部分：

#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}

JavaScript部分：

window.addEventListener('scroll', function() {
  var backToTop = document.getElementById('backToTop');
  if (window.pageYOffset > 300) {
    backToTop.style.display = 'block';
  } else {
    backToTop.style.display = 'none';
  }
});

document.getElementById('backToTop').addEventListener('click', function() {
  window.scrollTo({top: 0, behavior: 'smooth'});
});

注意事项

平滑滚动效果在现代浏览器中支持良好，但在旧版浏览器中可能不生效
使用document.documentElement.scrollTop时，某些情况下可能需要改用document.body.scrollTop
返回顶部按钮建议添加适当的过渡效果和样式，提升用户体验

兼容性处理

function scrollToTop() {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
}

这种方法通过动画帧实现平滑滚动，兼容性更好。