Question

我有一个标签，用于指定HTML页面上我想在点击链接时移动的部分：

<a name="ourServicesSection"></a>

这很好用，唯一的问题是我在页面顶部有一个固定的导航栏。因此，当我单击链接时，它会移动到页面的某个部分，但导航栏会覆盖它的一部分。有没有办法可以通过导航栏的大小“抵消”移动？我该怎么做？

由于

Answer 1

在您滚动的任何元素的顶部放置边距/填充似乎是常见做法。或向上移动achor目的地。

Answer 2

您可以使用Javascript（jQuery）使用margin

处理带偏移或重新定位元素的滚动

Answer 3

如果你愿意使用jQuery，那么这样的东西就可以了。

 $('a[href^="#"]').on('click', function(e) {
     e.preventDefault();

     var scrollTo = $(this).attr('href');

     var pageOffset = $(scrollTo).offset().top - ($(window).height() / 2);
     $(document).scrollTop(pageOffset);
 });

示例：http://jsfiddle.net/vDQaT/

移至HTML页面上的特定部分

3 个答案: