javascript - 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');