带小数的jQuery滚动动画计数器：滚动时数值无法固定问题

问题原因 #

Counter-Up插件依赖Waypoints实现视口触发逻辑，默认会在计数器元素每次进入视口时重新启动计数动画。当你滚动页面让元素离开后再次进入视口，插件会从0开始重新计数，导致数值无法保持固定。

解决方案 #

核心思路是让计数器动画仅触发一次，完成后固定显示目标数值，避免重复执行。以下是两种可行的实现方式：

方法一：利用插件内置的触发控制

通过配置Waypoints的triggerOnce选项让动画只执行一次，同时在动画完成后强制固定数值并移除触发类：

<script>
$(document).ready(function(){
    // 预先保存每个计数器的目标数值
    $('.counter').each(function(){
        $(this).data('target-value', $(this).text());
    });

    $('.counter').counterUp({
        delay: 100,
        time: 1200,
        // 开启单次触发，避免重复执行
        triggerOnce: true
    }).on('counterup.complete', function() {
        // 动画结束后固定显示目标数值
        $(this).text($(this).data('target-value'));
        // 移除counter类，防止后续意外触发
        $(this).removeClass('counter');
    });
});
</script>

方法二：手动绑定Waypoints并销毁触发监听

手动初始化Waypoints，在第一次触发计数后销毁该监听，彻底避免重复触发：

<script>
$(document).ready(function(){
    $('.counter').each(function(){
        var $counter = $(this);
        var targetValue = $counter.text();
        
        $counter.waypoint(function() {
            // 执行计数动画
            $counter.counterUp({
                delay: 100,
                time: 1200
            });
            // 销毁当前waypoint，不再监听滚动触发
            this.destroy();
        }, {
            // 设置触发时机：元素底部进入视口时启动动画
            offset: 'bottom-in-view'
        });
    });
});
</script>

关键说明 #

两种方法都确保计数器仅在元素第一次进入视口时执行一次动画，之后会固定显示初始设置的目标数值，不会再因滚动而变化。

内容的提问来源于stack exchange，提问作者Hadi-Jamla