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