scrollTo跨多个页面

Question

我通过调用每个元素的id来激活滚动，从而使jQuery 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>

我怎样才能做到这一点？

Answer 1

我可以想到两种方法来做到这一点。

1：您可以使用ajax加载其他页面，但这意味着该页面本身中的任何javascript都不会运行，除非您使用eval（错误选项）。 更好的方法是根据所加载的页面触发一个可修复所有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!");
        }
    }
});

希望这能帮助您