jQuery的LocalScroll + hashchange事件瀏覽器兼容性問題

我建設，我現在用Ariel Fleslers jQuery LocalScroll plugin，這是我想要做的兩件事情站點：jQuery的LocalScroll + hashchange事件瀏覽器兼容性問題

1）動畫滾動到錨時，點擊一個鏈接
2）當瀏覽器的後退按鈕被按下時，滾動到先前訪問過的錨點。

滾動發生在內容溢出的容器內。

第一個足夠簡單。爲了實現第二個目標，我做了相當多的Google搜索，但沒有真正找到解決方案，儘管我遇到了一些想要做類似事情的人發佈的幾篇文章。

我結束了使用Ben Almans jQuery hashchange event plugin連同LocalScroll到acheive期望的結果，代碼如下所示：

$(document).ready(function(){ 
    $.localScroll({ 
     hash:true, 
     target:'#container', 
     duration:500 
     }); 

$(window).hashchange(function(){ 
    var hash = location.hash; 

    if (hash === ''){ 
    location.hash = '#main'; 
    } 

    $.localScroll.hash({ 
    reset:false, 
    hash:true, 
    target:'#container', 
    duration:500 
    }); 
    }); 
    $(window).hashchange(); 
    });

上面的代碼，即使我是一個黑客的有些（沒有雙關語意）時它涉及到編碼，做我想在Firefox，資源管理器和歌劇。但是，我在Chrome和Safari中遇到了不同的問題。

在Chrome中，基本上，單擊鏈接時滾動是動畫效果，但按下瀏覽器後退按鈕時，它只是跳轉到錨點而沒有動畫轉換。但仔細觀察一下，似乎它偶爾會爲後退按鈕設置動畫效果，但我無法理解爲什麼它只在某些時候出現。

在Safari中，無論是單擊鏈接還是使用後退按鈕，它都會跳轉到無動畫的錨點。

動畫在Safari工作之前我實現了hashchange事件的解決方案，當代碼是這樣的：

$(document).ready(function() { 



$.localScroll({ 
hash:true, 
target:'#container', 
duration:500 
}); 
});

沒有人有任何想法，是什麼原因造成Chrome和Safari這些問題？正如我所說的，我是一名設計師，而不是一名編碼員，而且這確實在擴展我的能力，所以隨時指出我在上面的代碼中犯的任何錯誤，無論他們是否與手邊的問題無關或不。

此外，感謝Ariel和Ben爲這些偉大的插件。

編輯：好吧，這是另一個奇怪的事情，當我上傳網站到我本地運行的測試服務器，滾動鏈接點擊在Safari中工作，即使當我運行時完全相同的代碼不起作用它關閉服務器。無論如何，當後退按鈕被按下時，Safari和Chrome都不會觸發動畫，因此問題依然存在。

來源

2011-03-03 Herman

我對這兩個插件都有嚴重的問題;他們很難使用，功能缺乏，和越野車。

試試這個組合來代替：

它會處理你的滾動的方式平滑，支持HTML5歷史API和工作在所有的瀏覽器。

來源

2011-03-04 13:36:40 balupton

那些看起來很簡單。當頁面加載時，如何滾動到哈希處的錨點？我沒有看到這個選項。 – Sparky 2011-10-13 06:03:52

jQuery的LocalScroll + hashchange事件瀏覽器兼容性問題

回答

相關問題