JS--获取滚动条位置并实现页面滑动到锚点位置

当我们进入一个网页，不免会发现有很多滚动条，当我们在页面上滑动时，滚动条的位置也会随着发生改变。在开发网页时，有时希望能够获取当前页面滚动条的位置，或者希望能够通过代码实现页面的滑动到特定位置。本篇文章将介绍如何使用JS获取滚动条位置，并通过JS实现页面滑动到锚点位置的功能。

获取滚动条位置

要获取滚动条位置，我们可以使用Javascript中的scrollTop属性，这个属性返回文档内容上边缘与窗口上边缘之间的距离，也就是滚动条滚动的距离。

我们可以通过如下代码获取滚动条位置：

let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

解释一下这段代码：

• window.pageYOffset是跨浏览器的，如果存在该属性，则用该属性获取scrollTop值；
• 如果不存在window.pageYOffset，则尝试使用标准的document.documentElement.scrollTop属性获取scrollTop;
• 如果上述两个属性都不存在，则尝试使用“怪异模式”下的document.body.scrollTop属性获取scrollTop。

通过这段代码，我们可以获取当前窗口的scrollTop值，从而得到滚动条的位置。

实现页面滑动到锚点位置

想要通过代码实现页面滑动到锚点位置，我们需要用到滚动条位置的获取以及JS中的scroll()方法。其中，scroll()方法可以实现滚动条的滑动。在实践中，我们可以通过JS获取到目标元素的位置，然后使用scroll()方法让页面滑动到该位置。

以下是一段实现滑动到锚点位置的代码：

function scrollToAnchor(anchorName) {
    if (anchorName) {
        let anchorElement = document.getElementById(anchorName);
        if (anchorElement) {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            let targetOffset = anchorElement.offsetTop - scrollTop;
            let startTime = null;

            function scrollTo(timestamp) {
                if (!startTime) {
                    startTime = timestamp;
                }
                let progress = timestamp - startTime;
                let scrollY = targetOffset * Math.min(progress / 500, 1);
                window.scroll(0, scrollTop + scrollY);
                if (progress < 500) {
                    window.requestAnimationFrame(scrollTo);
                }
            }

            window.requestAnimationFrame(scrollTo);
        }
    }
}

解释一下这段代码：

• 首先，我们通过参数anchorName获取目标元素的id；
• 如果存在该元素，则使用offsetTop属性获取目标元素的位置，从而计算出目标元素到页面顶部的距离；
• 然后，我们需要计算出初始位置和目标位置之间的滚动距离，即上面代码中的targetOffset；
• 接着，我们使用requestAnimationFrame()方法实现有动画效果的滑动，具体来说，每隔一段时间计算出当前时间已经滑动的距离，然后使用scroll()方法滑动页面；
• 直到滑动到目标位置，或者到达距离目标最近的位置，滑动结束。

结语

本篇文章介绍了如何使用JS获取滚动条位置，并实现页面滑动到指定锚点位置的功能。这是web开发中比较实用的技巧，希望读者可以借此对web开发有更深入的理解。

阅读剩余 36%