Question

我在页面上有一个功能，当网址匹配时，应该通过javascript自动滚动：

$(window).load(function () {
        if (window.location.href.indexOf("something-on-url") > -1) {
                $("html,body").animate({
                    scrollTop: $("#specificDiv").offset().top
                }, 300);
        }

问题是我在页面顶部有一个图像轮播，并且它需要一段时间才能加载，因此它会在旋转木马到达之前进行自动滚动（旋转木马的高度不计入计数所以它是自动滚动尽可能多的像素，减去旋转木马的高度。

我尝试了document.ready()而不是$(window).load，结果相同。我已经尝试添加图片/轮播高度，但是如果我去img.height()，那时它会给我“0”，并且硬编码它不是一个选项，因为这是一个移动响应网站。我也尝试将.onload()用于轮播和轮播标签中的img标签，但这不会触发自动滚动（从不）。

只有工作到目前为止，它使用setTimeOut()延迟了滚动功能，但是根据用户的不同，它可能会加速轮播，因此对于大多数情况，安全setTimeOut()将会很长。

Answer 1

由于用户workabyte的评论，我通过查看轮播文档找到了一个修复程序。这就是它现在的样子：

  $(window).load(function () {
            if (window.location.href.indexOf("something-on-url") > -1) {
                $(".orbit-slides-container").one("orbit:before-slide-change", function () {
                    $("html,body").animate({
                        scrollTop: $("#specificDiv").offset().top
                    }, 200);
                });
            }

orbit:before-slide-change是来自轨道API（http://foundation.zurb.com/docs/v/4.3.2/components/orbit.html）的事件。假设旋转木马满载orbit:ready时也会发生一个事件，但这对我不起作用。

Answer 2

有时，当图像已被缓存时，不会调用onload事件。

要使其有效，您还需要检查this.complete和this.readyState。

您可以使用以下内容：

$.fn.whenLoaded = function(fn){
    return this.each(function(){
        if (this.complete || this.readyState == 'complete') {
            fn.call(this);
        } else {
            $(this).load(fn);
        }
    });
}

$('img#firstCarouselImage').whenLoaded(function(){
    if (window.location.href.indexOf("something-on-url") > -1) {
         $("html,body").animate({
            scrollTop: $("#specificDiv").offset().top
         }, 300);
    }
});

页面满载后运行javascript autoscroll功能

2 个答案: