使用JavaScript实现侧边导航条锚点效果

最新推荐文章于 2023-03-25 18:00:25 发布

原创

最新推荐文章于 2023-03-25 18:00:25 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍如何使用JavaScript实现类似淘宝侧边栏的带缓冲效果的锚点导航。通过掌握定时器的运用、窗口对象属性以及缓冲运动函数，解决计算目标距离的难题，实现平滑滚动。代码中，利用offsetTop获取目标块位置，根据速度公式计算每次滚动的距离，确保在页面已有滚动时也能正确工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个类似于淘宝侧边栏的带有缓冲效果的锚点。

要点：

掌握定时器的运用
运用定时器实现缓冲效果
掌握window对象的基本属性

缓冲运动函数仍然按照原步骤实现：

首先将定时器清空
打开新定时器
计算速度，根据 speed = speed>0? Math.ceil(speed):Math.floor(speed); 处理速度值
设置每次滚动的距离，只是这里运用了window.scrollTo(x,y)方法
判断运动停止条件

遇到的问题：

错误主要是出在计算运动的目标距离上。之前学习的程序的目标距离都是通过可视区距离-目标块距离+滚动距离得到的，但是在本例中，这种方法我出不来效果。
此次程序的主要思路是通过获取到目标块的offsetTop，将其作为目标距离。然后根据速度=(目标距离-滚动距离)/10，计算出每次运动的速度。再将速度值和滚动距离相加得到新的滚动距离，依次进行。
还需要注意的是，我的初始滚动距离为0，也要考虑当页面在还未点击时就已经滚动过的情况。

详细代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Aries">
    <meta name="keywords" content="HTML,CSS,JavaScript,淘宝">
    <meta name="description" content="使用Javascript实现淘宝楼层跳跃效果">
    <title>使用JavaScript实现侧边导航条锚点效果</title>
    <link rel