scrollTo跨多個頁面

我有jQuery scrollTo工作在網站的單個頁面上，通過調用每個元素'id它激活滾動。scrollTo跨多個頁面

我想要做的是在另一個頁面上包含元素，當點擊菜單中的鏈接時，加載新頁面並滾動到正確的元素。

例如，如果我的聯繫人部分位於「第1頁」的底部，但我在「第2頁」。我希望能夠點擊菜單中的聯繫人並加載「第1頁」，然後滾動到底部的聯繫人部分。

當前的腳本和代碼我使用如下：

<script type="text/javascript"> 
    function goToByScroll(id){ 
     $('body').animate({ scrollTop: $("#"+id).offset().top },'slow'); 
    } 
    var hash = window.location.hash; 

    setTimeout(function(){ 
     goToByScroll(hash); 
    }, 300); 
</script>

導航鏈接：

<a href="javascript: void(0)" onClick="goToByScroll('contact')">contact</a>

我怎樣才能做到這一點？

來源

2011-12-12 Ben

我可以想出2種方法來做到這一點。

1：您可以使用ajax加載其他頁面，但這意味着除非您使用eval（壞選項），否則頁面中的任何javascript都不會運行。更好的方法是觸發一個函數，該函數根據您正在加載的頁面修復所有JavaScript。

2：通過url傳遞一個參數，它告訴scrollto應該觸發到某個ID。但是這會混亂你的網址。在註釋

回覆：我創建的概念在這裏的證明： http://stackoverflow.stijnd.be/scrollto-fix/?tar=Scrollto3

的JavaScript檢查URL的查詢字符串，並對其進行解析：這是jQuery的代碼：

$(document).ready(function(){ 
    var current_url = document.URL; 

    var qry_start = current_url.indexOf('?'); 
    var qry_str_values = new Array(); 

    if(qry_start) 
    { 
     var qry_str = current_url.substring((qry_start+1));//omit ? 
     var qry_str_array = qry_str.split('&'); 

     for(var i=0; i < qry_str_array.length; i++) 
     { 
      var tmp_pair = qry_str_array[i].split('='); 
      qry_str_values[tmp_pair[0]] = tmp_pair[1]; 
     } 

     if(typeof qry_str_values['tar'] != 'undefined') 
     { 
      alert('The page should scroll to: #'+qry_str_values['tar']); 
      $.scrollTo('#'+qry_str_values['tar'], 1000); 
     } 
     else 
     { 
      alert("Couldn't find the tar-key in the querystring!"); 
     } 
    } 
});

希望這會讓你在路上

來源

2011-12-12 11:29:38

你能否提供一些關於如何實現第2點的代碼。我已經嘗試了一些相同的方法，但無法完成它的工作，因此不勝感激。 – Ben

我編輯了我的答案並添加了一個示例代碼 –

感謝您的支持。我是否將鏈接保存在我的菜單中？ – Ben

scrollTo跨多個頁面

回答

相關問題