Question

所以我有这个：

<a href="#link">clicking here</a>

<a name="link">goes here</a>

很简单，但问题是我的网站有一个固定的位置标题，它位于页面的顶部，所以当用户点击链接时，标题会隐藏我希望它们去的地方。所以我猜我真正希望他们最终得到的像素数量高于我实际想让他们看到的数量。我已经尝试将目标链接放在我希望它们结束的位置上方，但它是一个文本块，因此它会随着屏幕大小的不同而变化，因此不一致。

我想知道是否有办法解决这个问题，也许是用css解决的问题。

提前致谢。

Answer 1

我意识到这已经超过一年了，但为了其他任何遇到它的人的利益：

一个稍微简单的解决方案是将填充放在您使用链接定位的部分的顶部。

HTML：

<section id="section_name">  

  ...Your stuff here...  

</section>

CSS：

#section_name {
  padding-top: 40px;
}

Answer 2

您可以使用jQuery方法，以便在单击带有＃的链接时，它会找到要转到的元素的位置，然后移动到目标上方X个像素的位置。

这样的事情：

$(function(){

    var positionOffset = 50;

    $('a[href=*"#"]').click(function(){

        var targetHash = this.hash;
        if(targetHash.length > 0 && targetHash == window.location.hash){

            var elementPosition;

            if($(targetHash).length){

                elementPosition = $(targetHash).offset();

            } else {

                var targetAnchor = targetHash.replace("#", "");
                elementPosition = $('a[name="' + targetAnchor + '"]').position();

            }    

            $(window).scrollTop(elementPosition.top - positionOffset);      
            return false;    

        } else {
            return true;
        }

    });

});

链接到略高于网页特定部分的区域

2 个答案: