javascript 滑动按钮—js滑动到某个指定位置显示：代码示例

滑动按钮是一种常见的网页交互元素，它可以让用户点击按钮后页面滑动到指定的位置。在JavaScript中，我们可以通过修改页面的scrollTop属性来实现滑动效果。

我们需要获取按钮元素，并给它添加一个点击事件监听器。当按钮被点击时，我们会执行一个滑动函数，将页面滑动到指定位置。

示例代码如下所示：

<button id="scrollBtn">滑动到顶部</button>
<script>
  var scrollBtn = document.getElementById("scrollBtn");
  scrollBtn.addEventListener("click", function() {
    scrollToTop();
  });
  function scrollToTop() {
    var currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
    var targetPosition = 0; // 滑动到页面顶部
    var distance = targetPosition - currentPosition;
    var duration = 500; // 滑动持续时间，单位为毫秒
    var perTick = distance / duration * 10;
    setTimeout(function() {
      currentPosition += perTick;
      document.documentElement.scrollTop = currentPosition;
      document.body.scrollTop = currentPosition;
      if (currentPosition === targetPosition) {
        return;
      }
      scrollToTop();
    }, 10);
  }
</script>

在上面的示例代码中，我们首先通过`document.getElementById`方法获取了id为"scrollBtn"的按钮元素，并将它赋值给`scrollBtn`变量。然后，我们给按钮元素添加了一个点击事件监听器，当按钮被点击时，会执行`scrollToTop`函数。

`scrollToTop`函数是实现滑动效果的核心部分。我们通过`document.documentElement.scrollTop`和`document.body.scrollTop`获取当前页面的滚动位置。然后，我们将目标位置设为页面顶部的位置，即0。接下来，我们计算出滑动的距离和持续时间，以及每次滑动的距离。

然后，我们使用`setTimeout`函数来实现滑动的动画效果。在每次定时器回调函数中，我们更新当前滚动位置，并将其赋值给`document.documentElement.scrollTop`和`document.body.scrollTop`，以实现页面的滑动效果。当滚动位置达到目标位置时，停止滑动。

通过以上的代码和解释，我们可以实现一个简单的滑动按钮，点击按钮后页面会滑动到顶部。你也可以根据需要修改目标位置、滑动持续时间等参数，来实现不同的滑动效果。