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跨多个页面

回答

相关问题