首页
前端开发
Javascript
JS HTML特效返回顶部功能实现

JS HTML特效返回顶部功能实现

19 次浏览 0 条评论
htm
htm

在网页中实现 返回顶部 功能，可以通过简单的 JavaScript 和 HTML 特效来完成。首先，在页面底部添加一个返回顶部按钮，利用 JavaScript 监听滚动事件，当用户向下滚动一定距离时，按钮显示出来，点击按钮后，页面平滑滚动至顶部。以下是实现的代码示例：

const button = document.getElementById('backToTop');
[removed] = function() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    button.style.display = 'block';
  } else {
    button.style.display = 'none';
  }
};
button.onclick = function() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE
};
通过以上简单的代码，可以很方便地实现返回顶部的效果。

htm 文件大小：10.15KB