滚动到多个页面

scrollTo across multiple pages

本文关键字：滚动      更新时间：2023-09-26

我有jQuery scrollTo工作在一个网站的单一页面，通过调用每个元素的id激活滚动

我想做的是在另一个页面上包含元素，当单击菜单中的链接时，加载新页面并滚动到正确的元素。

例如，如果我的联系人部分在"第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>

我该怎么做?

我可以想到两种方法。

1:您可以使用ajax来加载其他页面，但这意味着页面本身的任何javascript都不会运行，除非您使用eval(坏选项)。一个更好的方法是触发一个函数，根据你正在加载的页面修复所有javascript。

2:通过url传递一个参数，它告诉scrollto应该触发到一个特定的ID。但是这会使你的url混乱。

回复评论:我在这里创建了一个概念证明: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!");
        }
    }
});

希望这篇文章能让你一路顺风

相关文章：