Javascript确定页面上的开始滚动位置？

Question

我有一个具有“固定”标题的网站，问题是它确实弄乱了链接到页面下方的链接，例如“http://mysite.com/#lower_div_on_the_page”

甚至可以使用 javascript 来做类似的事情

if (URL has #hashtag) {starting scroll position = normal position + (my_header_height)}

这可能吗？

编辑： 感谢所有的回复......非常感谢。作为参考，我肯定会使用 jQuery...我将如何使用 jQuery 来做到这一点？

Answer 1

是的，这是可能的。

以下是您需要采取的步骤：

• 设置 DOM 加载事件处理程序。有不止一种方法可以做到这一点，这里是link to a web page that explains how to do this。此外，如果您使用 jQuery（参见 .ready()）或 Prototype.js（参见 observe extension）等 javascript 框架，它会容易得多。

• 在 DOM 加载的事件处理函数中，解析主题标签的 URL (window.location)。

  var hashTag = window.location.href;
hashTag = hashTag.substr(hashTag.indexOf('#') + 1);
// now hashTag contains the portion of the URL after the hash sign

• 然后，如果您识别出锚标记，则根据该元素在 DOM 树中的位置或您想使用的任何逻辑计算所需的滚动位置。同样，jQuery（参见 .offset()）或 Prototype.js（参见 cumulativeScrollOffset）应该能够帮助确定滚动到的正确偏移量。

• 设置页面的滚动。同样，jQuery（参见 .scrollTop()）或 Prototype.js（参见 scrollTo）都有扩展来帮助解决这个问题。

这是一个 jQuery 示例：

$(document).ready(function() {
    var hashTag = window.location.href;
    if(hashTag.indexOf('#') > 0)
    {
        hashTag = hashTag.substr(hashTag.indexOf('#'));

        // now get the element's offset relative to the document
        var offsetTop = $(hashTag).offset().top;

        // and finally, scroll the document to that offset
        $(document).scrollTop(offsetTop);
    }
});

Answer 2

当然，你可以做一些简单的事情：

if(window.location.hash != ''){
   elementOffset = document.getElementById(window.location.hash.substr(1)).offsetTop;
   window.scrollTo(0,elementOffset + my_header_height);
}

使用 jQuery 显然会更简单，并且您需要根据包含的元素等获得额外的偏移量，但这应该可以帮助您入门。