css中怎么设置返回顶部

CSS中如何设置返回顶部

.scroll-top {
  position: fixed; /*使其固定在页面上方*/
  bottom: 2rem; /*距离底部位置*/
  right: 2rem; /*距离右侧位置*/
  z-index: 999; /*使其置顶*/
  display: none; /*初始状态为隐藏*/
}

.scroll-top.show {
  display: block; /*当滚动高度超过一定值时，显示返回顶部按钮*/
} 

HTML中如何添加返回顶部按钮

<button class="scroll-top" title="返回顶部">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="none" d="M0 0h24v24H0z"/>
    <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm2.707 11.707l-1.414 1.414L12 11.414l-2.293 2.293-1.414-1.414L12 8.586l2.707 2.707z"/>
  </svg>
</button> 

CSS与JS结合如何实现回到顶部的效果

const scrollBtn = document.querySelector('.scroll-top');

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

window.addEventListener('scroll', () => {
  if (window.pageYOffset > 200) { //当滚动高度超过200时，显示返回顶部按钮
    scrollBtn.classList.add('show');
  } else {
    scrollBtn.classList.remove('show');
  }
});