javascript实现回到顶部特效

当页面内容比较长时，用户需要不断地向下滚动页面才能浏览全部内容，但有时候用户想快速回到页面顶部，此时，通过JavaScript实现回到顶部特效便能提高用户的使用体验。

下面是“JavaScript实现回到顶部特效”的完整攻略。

一、获取页面滚动高度

使用window.scrollY属性或window.pageYOffset属性可以获取文档当前的纵向滚动距离。在滚动过程中，每次滚动都会更新滚动距离，我们可以通过setInterval()或requestAnimationFrame()方法不断获取文档当前的滚动高度。

代码示例：

function getScrollTop() {
  return window.scrollY || window.pageYOffset;
}

let timer = null;
function scrollToTop() {
  const scroll = getScrollTop();
  if (scroll > 0) {
    window.scrollTo(0, scroll - 50);
    timer = setTimeout(scrollToTop, 10);
  } else {
    clearTimeout(timer);
  }
}

二、添加返回顶部按钮

可以通过创建一个<button>元素，设置样式并将其添加到页面中。

HTML示例：

<button class="back-to-top">返回顶部</button>

CSS示例：

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: none;
  background-color: #333;
  color: #fff;
  border: none;
  outline: none;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
}

.back-to-top.show {
  display: block;
}

JavaScript示例：

const backToTopBtn = document.querySelector('.back-to-top');

window.addEventListener('scroll', function() {
  if (getScrollTop() > 100) {
    backToTopBtn.classList.add('show');
  } else {
    backToTopBtn.classList.remove('show');
  }
});

backToTopBtn.addEventListener('click', function() {
  clearTimeout(timer);
  scrollToTop();
});

三、创建返回顶部动画

使用定时器或requestAnimationFrame()方法实现平滑滚动，使用户在返回顶部时有良好的滚动体验。

代码示例：

let timer = null;
function scrollToTop() {
  const scroll = getScrollTop();
  if (scroll > 0) {
    window.scrollTo(0, scroll - 50);
    timer = setTimeout(scrollToTop, 10);
  } else {
    clearTimeout(timer);
  }
}

四、总结

在页面中添加返回顶部按钮并实现平滑滚动，可以提高用户的使用体验。以上就是通过JavaScript实现回到顶部特效的完整攻略，我们可以根据自己的需求进行修改和扩展。