jQuery fadeIn 搞砸了#hashtag 交叉链接

Question

好的，所以我有一个使用 jQuery 发生的整个页面隐藏/淡入效果。一切都很顺利，直到我意识到delay() + fadeIn() 导致我的

<a href="http://example.com/my_page/#my_ID">Hashtag Links</a>

以滚动位置在顶部而不是 #my_ID 在页面上的位置加载。

我知道这与整个页面 delay() // fadeIn() 效果有关。我不能放弃这些效果，有什么办法可以规避这个问题？

您可以在

上查看该网站（生产中）

http://valeriaentertainment.com.s66112.gridserver.com/

编辑

这是相关的 jQuery 代码：

// #curtain DIV begins hidden then fades in after #bgImage (curtain) is loaded - prevents "ribbon" loading effect in Chrome

var allDone = false;
var url = $('.bgImage').attr('src');
var img = new Image();
img.onload = function() {
  if (!allDone) {
    $('#curtain').delay(1500).fadeIn(1000);
    allDone = true;
  }
};
setTimeout(img.onload, 2000); // show the hidden stuff after 5 seconds, image or no image
img.src = url;

Answer 1

乍一看gallery page，看起来整个页面内容最初是隐藏的。当浏览器加载页面时，它会开始寻找 URL 片段中标识的元素；该元素将被隐藏或不可见，因此它不会有任何有用的位置可以滚动到并且滚动位置不会发生任何事情。

我认为最简单的做法是在.fadeIn() 回调中自己处理滚动：

• 从window.location.hash中取出片段。
• 找出它在页面上的位置，例如：
  var y = $('#' + window.location.hash).offset().top;
• 然后将页面滚动到该位置：
  $('html,body').attr('scrollTop', y);

如果您想变得花哨，甚至可以为 scrollTop 更改设置动画。

下面是一个帮助您入门的示例：

$('#curtain').delay(1500).fadeIn(1000, function() {
    // Bail out if there is no hash.
    if(!window.location.hash)
        return;

    // Convert the hash to an element and bail out
    // if there is no such element.
    var $e = $(window.location.hash);
    if($e.length < 1)
        return;

    // And, finally, do what we're here to do.
    $('html,body').attr('scrollTop', $e.offset().top);
});

如果您想animate 滚动，那么您可以将$('html,body').attr(...) 部分更改为如下内容：

$('html,body').animate({ scrollTop: '+=' + $e.offset().top }, 'fast');