页面从指定滚动位置加载时滚动动画不触发的问题及解决请求

我来帮你搞定这个问题——你遇到的其实是浏览器**往返缓存（Back-Forward Cache，bfcache）**带来的常见坑：当你从其他页面点击返回时，浏览器会直接从缓存里恢复页面的状态（包括之前的滚动位置），但这时候$(document).ready()不会重新执行，你的初始检测逻辑没机会触发，导致那些已经在视口内的元素没加上动画类。

修改后的完整代码 #

我们只需要两个关键调整就能解决：

1. 新增pageshow事件监听，处理浏览器从缓存恢复页面的场景
2. 确保页面加载（包括缓存加载）时立刻执行一次元素检测

var $window = $(window);

function check_if_in_view() {
    var $animation_elements = $('.animation-element');
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = window_top_position + window_height;

    $.each($animation_elements, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = element_top_position + element_height;

        // 原有的视口判断逻辑不变
        if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
            $element.addClass('in-view');
        }
        // 如果你需要元素离开视口后移除动画，就取消下面的注释；否则删掉这段
        // else {
        //     $element.removeClass('in-view');
        // }
    });
}

// 监听滚动和窗口大小变化，保持原有的动态检测
$window.on('scroll resize', check_if_in_view);

// 页面首次加载时执行检测
$(document).ready(check_if_in_view);

// 关键：处理浏览器从缓存恢复页面的情况
$(window).on('pageshow', function(event) {
    // event.persisted 为true时，说明页面是从bfcache加载的
    if (event.persisted) {
        check_if_in_view();
    }
});

为什么这么改？ #

• pageshow事件：这个事件会在页面显示时触发，不管是首次加载还是从缓存恢复。通过event.persisted判断页面是否来自缓存，此时重新执行检测逻辑，就能让那些已经在视口内的元素立刻加上in-view类，触发动画。
• 保留原有的scroll和resize监听，确保用户滚动页面时，新进入视口的元素依然能正常触发动画。
• 关于else分支：如果你的动画是一次性的（元素进入视口后就一直显示动画效果），就不需要这段；如果需要元素离开视口后隐藏动画，再把这段注释取消即可。

这样修改后，不管是第一次打开页面，还是从其他页面返回恢复滚动位置，所有在视口内的animation-element元素都会正确触发动画啦。

内容的提问来源于stack exchange，提问作者Shaun