html - 滚动条位置

Question

通过单击，我想将滚动条定位到特定的 div。我使用这段代码：

<a href="#sponsor">Go to Sponsor</a>
...
<div id="sponsor">Sponsor</div>

问题是我的标题是固定的（高度为 50 像素）并与 div#sponsor 本身重叠。

见这里http://jsfiddle.net/xqZ9y/

怎么解决？

谢谢你。

Answer 1

问题是标准锚将通过将文档的 scrollTop 设置为目标的偏移顶部来将您带到目标。在您的情况下，这意味着该项目位于您的标题后面。解决此问题的一种方法是覆盖锚点单击事件以在重新定位项目时补偿标题高度。

这是一些可以做到这一点的jQuery...

$(function(){
    $("a[href^='#']").on("click.scrollFix", function(e) {
        // cancel the click of the a href from taking you to the 
        // anchor by normal means
        e.preventDefault();        

        // instead find the element and scroll to the elements position - the height of the     header
        var targetSelector = $(this).attr("href"),
            targetTop = $(targetSelector).offset().top,
            headerHeight = $("#header").outerHeight(true);

        $(document).scrollTop(targetTop - headerHeight);
    });
});

这是一个使用固定标题和一些垃圾内容的示例的工作小提琴:)

http://jsfiddle.net/QjheK/

Answer 2

您可以通过添加一个附加元素来绕过该问题，该元素使用#sponsor

<span id="sponsor"></span>

#sponsor {
    width: 0;
    height: 0;
    position: relative:
    top: 50px;
}