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