Question

单击

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

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

问题是我的标题是固定的（高度为50px）并与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;
}

滚动条位置

2 个答案: