html - 滚动条位置

Question

单击一下我想将滚动条定位到特定的 div。我使用这段代码:

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

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

请参阅此处 http://jsfiddle.net/xqZ9y/

如何解决？

谢谢。

Answer 1

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

这里有一些 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);
    });
});

这是一个工作 fiddle ，其中包含一个使用固定 header 和一些垃圾内容的示例 :)

http://jsfiddle.net/QjheK/