js滚动条平滑移动示例代码

这里为大家详细讲解一下JavaScript滚动条平滑移动的示例代码的攻略。下面将从以下几个方面进行说明：

1. 简介
2. 代码实现
3. 示例说明

简介

滚动条平滑移动是一种常见的网页动效，这种效果可以让网页更加平滑自然，提升用户体验。本文提供的示例代码可以让您快速实现此功能。

代码实现

要实现滚动条平滑移动的效果，我们需要使用以下几个技术和方法：

1. document.documentElement.scrollTop和document.body.scrollTop两个属性：分别获取页面顶部和body元素的滚动高度值。
2. window.requestAnimationFrame()方法：此方法可以让动画更流畅，它会在浏览器的重绘周期中执行一次指定的函数。
3. element.scrollTo()方法：此方法可以让元素滚动到指定的位置。

具体实现代码如下：

function scrollToTop(){
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    if(top > 0){
        window.requestAnimationFrame(scrollToTop);
        window.scrollTo(0, top - top/8);
    }
}

以上代码用于将滑动条滑向页面顶部。其中，document.documentElement.scrollTop || document.body.scrollTop可获得当前页面的垂直滚动条位置，window.requestAnimationFrame(scrollToTop);用于在浏览器的重绘周期中执行指定的函数，window.scrollTo(0, top - top/8);是让页面向上滚动(减小页面位置)。

示例说明

我们将通过两个示例来说明此代码的具体使用。

示例一

在页面底部设置一个“返回顶部”的按钮，当用户点击这个按钮时，页面滚动条将平滑地滚动到页面顶部。

HTML代码：

<button onclick="scrollToTop()">返回顶部</button>

JavaScript代码：

function scrollToTop(){
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    if(top > 0){
        window.requestAnimationFrame(scrollToTop);
        window.scrollTo(0, top - top/8);
    }
}

点击“返回顶部”按钮后，页面将会平滑地滚动到页面顶部。

示例二

我们也可以将此效果应用到页面导航栏中，当用户点击导航栏时，页面将平滑滚动到对应内容的位置。

HTML代码：

<ul>
  <li><a href="#" onclick="scrollToPosition(0)">主页</a></li>
  <li><a href="#" onclick="scrollToPosition(500)">项目</a></li>
  <li><a href="#" onclick="scrollToPosition(1000)">联系我们</a></li>
</ul>

JavaScript代码：

function scrollToPosition(position){
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    if(top < position){
        window.requestAnimationFrame(scrollToPosition);
        window.scrollTo(0, top + 100);
    }
    else{
        return;
    }
}

点击导航栏时，页面将平滑滚动到对应内容的位置。

以上就是关于JavaScript滚动条平滑移动的示例说明。通过以上的讲解，相信大家已经掌握了该技术的实现方法。