角后退按钮 - Javascript

这是一个用Javascript实现的角后退按钮，它可以让用户点击按钮时返回到网页顶部。

实现

我们需要先在HTML文件中创建一个按钮，然后使用Javascript为它添加点击事件。

HTML代码

<button id="scrollUpBtn">^</button>

Javascript代码

// 获取按钮元素
var scrollBtn = document.getElementById("scrollUpBtn");

// 为按钮添加点击事件
scrollBtn.addEventListener("click", function() {
  // 计算当前滚动距离
  var currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
  
  // 如果滚动距离大于0，就执行滚动动画
  if (currentPosition > 0) {
    window.requestAnimationFrame(scrollToTop);
  }
});

// 滚动动画函数
function scrollToTop() {
  // 获取当前滚动距离
  var currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
  
  // 计算下一帧的滚动距离
  var newPosition = currentPosition - currentPosition / 8;

  // 设置滚动距离
  document.documentElement.scrollTop = newPosition;
  document.body.scrollTop = newPosition;
  
  // 如果还没到达顶部，就继续执行滚动动画
  if (newPosition > 0) {
    window.requestAnimationFrame(scrollToTop);
  }
}

如何使用

将以上代码复制到JavaScript文件或HTML文件中即可。也可以修改按钮样式和按钮位置来适应自己的网站。