我通过调用每个元素的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>

我怎样才能做到这一点?

===============>>#1 票数:0

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

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!");
        }
    }
});

希望这能帮助您

  ask by Ben translate from so

未解决问题?本站智能推荐:

1回复

scrollTo延迟页面转换效果

我正在进行看起来像堆叠卡片的页面转换。 向下滚动时,显示下面的卡片。 但滚动回来查看以前的卡片很笨拙,我无法弄清楚原因。 当您快速向上滚动时,过渡效果似乎被中断。 请看这里的工作示例: $(window).on('beforeunload', function(){
1回复

跨多个页面加载栏

我有一个需要合并进度条的场景。 (这不是问题)。 问题出在这里: 这个进度条需要在不同的页面调用中继续进行,直到我打到特定页面为止。 所以基本上,它看起来像这样: HTML 脚本 因此从本质上讲,当转到下一页时,将需要继续执行进度条。 我一直在寻找正确的解
1回复

jQuery window.scrollTo导致页面冻结

我正在重新设计一个具有100%屏幕高度标题的网站,当用户开始滚动时,该标题必须缩小为0px。 我的问题是标题缩小为0px之后,页面的内容略高于窗口顶部。 标头缩小后,我尝试使用“ window.scrollTo(0,0)”,该方法有效,但此后我无法滚动任何内容。 我的页面停留在顶部? 演
2回复

jquery.scrollTo —在页面加载上滚动

我在网站的各个部分上使用以下jQuery插件— https://github.com/flesler/jquery.scrollTo 我可以使它与链接一起正常工作,以便在单击链接时可以将其滚动到页面的特定部分,如下所示: 但是在一页上我需要它,以便它在加载页面时滚动,例如:
3回复

jQuery scrollTo或动画不滚动页面

我正在尝试做一些简单的事情:当用户单击div时,整个页面将滚动到某个位置。 我之前已经做过,但是现在似乎无法正常工作。 我的意思是,现在我只想任何滚动至碰巧知道该插件。 确实很简单:$ .scrollTo(500,500)应该可以工作,但是什么也没有反应,不会抛出任何错误。 这里
1回复

转到另一个页面并在之后立即触发ScrollTo

想法是单击链接转到另一个页面(index.html),然后在该页面之后立即转到锚点div。 我试图通过触发事件来做到这一点,但没有用。 scrollTo在index.html中工作,但是我不能从反向链接中自动完成。 这是我的代码: 提前致谢。
3回复

jQuery scrollTo插件跳至Chrome而不是Firefox的页面顶部

我进行了搜索,但是我认为可以解决我的问题的答案不起作用。 考虑到我过去处理的事情要复杂得多,这似乎是微不足道的,但是我无法终生弄清楚出了什么问题。 在Chrome和Safari中,此代码在滚动2000像素之前会跳到页面顶部。 我一直在阅读其他列表,发现它们还有其他事件是问题所在,但这
1回复

Javascript scrollTo仅在完整页面重新加载时触发

我已经放弃了这一切,似乎做完了所有事情,然后几乎跟踪互联网上的每个链接以寻求修复,但无济于事。 我正在使用jquery scrollTo()和localScroll()插件来使网站的多个页面上的一些滚动动画localScroll()锚点/ id。 问题是,仅在页面在浏览器中完全重新加载或
1回复

mCustomScrollbar“ scrollTo”在单个页面应用程序中不起作用

我知道有很多类似的问题,但是我找不到解决方案。 在我的单页应用程序(具有Metro风格)中,当我从小部件返回家时,我想将滚动位置设置回进入小部件之前的位置。 <div id="overflow" class="mCustomScrollbar _mCS_9" styl
1回复

scrollTo函数在JSfiddle中正常运行,但在我的页面上不平滑

因此,scrollTo()滚动到页面的正确部分。 那不是问题。 它的使用立即出现在那。 我本来是要摆弄给您看这个问题的,但是发现它在那里起作用。 在下面的JSFiddle中可以看到,我的页面上没有“渐进式”滚动。 http://jsfiddle.net/8xK8x/1/ 如