Question

我一直致力于一个工作项目，我需要创建一个Javascript＆＃34;跳转菜单＆＃34;在页面内。

（问：等一下，跳转菜单？为什么不使用a元素和命名空间在您的页面中导航？

A ：因为那会破坏目的！所以，请不要提供这样的答案。我需要使用Javascript（而且我不会使用JQUERY !!!）

所以，这就是我的工作：

我在页面顶部列出了一个列表，并在页面底部列出了一个列表。

我在页面顶部的每个列表项中添加一个事件监听器，并在页面中附加对该列表项对应内容项的引用。

点击顶部的链接时，我会抓住要滚动到的项目的offsetTop，然后设置document.body.scrollTop或window.pageYOffset。

我从来没有真正需要window.pageYOffset，但某处告诉我它会起作用，我从未将其从我的代码中删除。无论哪种方式，这似乎与Chrome，Safari和Opera中的document.body.scrollTop一起使用，但它在Firefox或IE中无效。为什么呢？

以下是我设置document.body.scrollTop：

的代码块

if(elem.jump_ref)
{
    if(document.body.scrollTop || document.body.scrollTop === 0)
    {
        document.body.scrollTop = elem.jump_ref.offsetTop - page_top_padding;
    }
    else if(window.pageYOffset || window.pageYOffset === 0)
    {
        window.pageYOffset = elem.jump_ref.offsetTop - page_top_padding;
    }
}

And Heres The Project In JSFIDDLE

我已经走过去，发现＆＃34;是的，我抓住了正确的元素。＆＃34;和＆＃34;是的，我正在设置document.body.scrollTop和＆＃34;不，我没有将document.body.scrollTop设置为零。＆＃34;然而它仍然没有工作！请帮忙！我的网页应该在星期二上市！

Answer 1

嗯，我相信我找到了答案。到目前为止，它似乎适用于Chrome，Firefox，IE，Opera和Safari（这些是我能够测试的唯一）。我不知道此功能将具有哪种类型的移动支持（如果有的话），但我的页面已经具有完全不同的移动功能。

无论哪种方式，这都是修复。它是window.scrollTo方法！：

this.jump = function(evt)
{
    var elem = evt.srcElement || evt.currentTarget;
    var page_top_padding = 100;

    if(elem.jump_ref)
    {
        window.scrollTo(0, (elem.post_ref.offsetTop - page_top_padding));
    }
}.bind(this);

就像我说的那样，几乎所有东西都很棒！除了JSFiddle之外的所有东西。大声笑。我不太明白，但幸运的是没有人会在JSFiddle中访问我的网页。

设置页面滚动跨浏览器

1 个答案: