设置页面滚动跨浏览器答案

【问题标题】：Setting Page Scroll Cross-Browser设置页面滚动跨浏览器
【发布时间】：2014-11-27 04:54:07
【问题描述】：

我一直在从事一个工作项目，我需要在页面中创建一个 Javascript“跳转菜单”。

(Q：等等，一个跳转菜单？你为什么不直接使用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

我发现“是的，我抓住了正确的元素”。和“是的，我正在设置document.body.scrollTop，并且“不，我没有将document.body.scrollTop 设置为零。”但它仍然不起作用！请帮忙！我的网页应该在周二公开！

【问题讨论】：

求人的时候不要这么咸...
你的帖子被重复了...stackoverflow.com/questions/7435843/…
什么？ @PedroMoreira 也许您通过文字误解了我的心情，但我真的不确定我是如何变得“咸”的。对不起...
是的@PedroMoreira，您提供的链接似乎与我的主题完全相同。抱歉，在我问这个问题之前我没有找到这篇文章。

标签： javascript cross-browser

【解决方案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 中的网页。

【讨论】：