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 Loaded事件处理程序。有多种方法可以做到这一点，这里是link to a web page that explains how to do this。此外，如果您使用的是jQuery框架（例如.ready()）或Prototype.js（请参阅observe extension），那将会更容易。
在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显然更简单，你需要获得额外的偏移量，具体取决于包含元素等，但这应该让你开始。

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

2 个答案: