js控制的回到页面顶端goTop的代码实现

下面我给你详细讲解“JS控制的回到页面顶端goTop的代码实现”的完整攻略。

下面我给你详细讲解“JS控制的回到页面顶端goTop的代码实现”的完整攻略。

1. 设置页面结构

首先，我们需要在HTML文件中添加一个按钮并设置其CSS样式。示例代码如下：

<button id="goTop">回到顶部</button>

<style>
#goTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  font-size: 14px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
</style>

在上面的代码中，我们设置了一个id为“goTop”的按钮，并将其CSS样式设置为固定位置，位于页面的右下角，并默认隐藏，当页面滚动超过一定高度后才显示出来。

2. 编写JavaScript代码

接下来，我们需要编写JavaScript代码，使得按钮被点击后能够回到页面顶部。示例代码如下：

var goTopBtn = document.getElementById("goTop");

window.onscroll = function() {
  // 当页面滚动高度超过500px时显示回到顶部按钮，否则隐藏
  if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
    goTopBtn.style.display = "block";
  } else {
    goTopBtn.style.display = "none";
  }
}

goTopBtn.onclick = function() {
  // 使用定时器和缓动效果实现平滑回到顶部的效果
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop,
      step = Math.floor(scrollTop / 20);
  var timer = setInterval(function() {
    if (scrollTop > 0) {
      scrollTop -= step;
      document.body.scrollTop = scrollTop;
      document.documentElement.scrollTop = scrollTop;
    } else {
      clearInterval(timer);
    }
  }, 20);
}

上面的代码中，我们先通过document.getElementById方法获取到id为“goTop”的按钮元素，然后使用window.onscroll事件监听页面的滚动事件，当页面滚动高度超过500px时显示回到顶部按钮，否则隐藏。

当按钮被点击时，我们使用定时器和缓动效果实现平滑回到顶部的效果。具体地，我们先使用document.body.scrollTop或document.documentElement.scrollTop获取当前页面的滚动高度，然后计算出每步的步长（即“step”变量），最后使用setInterval方法开启一个定时器不断更新页面的滚动高度，实现平滑回到顶部的效果。

3. 示例说明

下面是两个使用了上面所述代码的示例。

示例一：直接使用代码

你可以将上面的HTML和JavaScript代码直接复制到自己的项目中使用。这种方式简单易行，但对于初学者来说可能需要耗费一些时间来理解代码的具体实现过程。

示例二：使用插件

另外，你也可以使用已经编写好的回到顶部的插件，比如gototop.js。这种方式无需你自己编写代码，只需在项目中添加对应的插件即可。但需要注意的是，插件的使用需要按照插件的使用说明进行。