如何导航到略高于锚标记的位置？答案

【问题标题】：How do I navigate to slightly above an anchor tag?如何导航到略高于锚标记的位置？
【发布时间】：2013-03-29 06:39:58
【问题描述】：

我知道如何导航到页面上的给定锚标记 - 我要做的是链接到目标锚上方 30-40 像素的页面部分。原因是我有一个引导导航，如果我喜欢直接进入带有锚点的页面部分，它最终会覆盖部分相关内容。

目前我有这个链接：

%a{:href => root_path + "#how_it_works"} How It Works

在它链接到的页面上：

.span12#how_it_works

关于如何获取链接以导航到略高于 .span12#how_it_works 的页面部分的任何想法？

【问题讨论】：

你在使用 twitter 引导程序吗？如果是这样，请用它标记您的问题。您是否为此目的使用affix？

标签： jquery ruby-on-rails twitter-bootstrap navigation anchor

【解决方案1】：

您可以通过在 CSS 中添加一些额外的填充来解决这个问题，但最可靠的方法是使用 javascript：

$('a[href="#how_it_works"]').on('click',function(e){
  // prevent normal scrolling action
  e.preventDefault();
  // grab the target url from the anchor's ``href``
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
     if (target.length) {
           window.scrollTo(0, target.offset().top - 50); // <-- our offset in px adjust as necessary
      return false;
  }
});

这里是codepen。

这使用了 Chris Coyier 的 smooth scroll script 的修改版本。我已经从滚动中删除了“平滑度”，但是您可以通过像这样为滚动顶部设置动画来添加它：

   if (target.length) {
     $('html,body').animate({
         scrollTop: target.offset().top + 20
    }, 1000);
    return false;
   }

【讨论】：

【解决方案2】：

这对你有用吗？
live example
jsFiddle

我为锚点添加了顶部填充：
CSS

a.anchor{
background-color:pink;
padding-top:30px;
display:block;
margin-top:-30px; /* if you want to cancel out the padding-top */
}

HTML

 <a href="#section1">section1</a><br>
  <a href="#section2">section2</a><br>
  <a href="#section3">section3</a><br>
  <a href="#section4">section4</a><br>  
  ....  
  <a name="section1" class="anchor">section1</a>  
  etc

编辑
重新阅读您的问题，如果问题是因为您使用带有附加导航栏的引导程序并且您的某些页面内容隐藏在导航栏下方，则更简单的解决方案是在页面正文顶部添加填充以移动页面含量较低。

如果您需要在网站的每个页面上执行此操作，请使用：
CSS

body {
padding-top:40px;
}

如果您只需要清除选定页面上的导航栏，请将一个类添加到违规页面上的正文标记并仅定位那些特定页面，例如
HTML

<body class="welcome">  
....

CSS

 body.welcome {
padding-top:40px;
}

【讨论】：

【解决方案3】：

我有个绝妙的主意来欺骗你的浏览器。无需 javascript。

创建一个 div 标签，给它一个名字。让 div 为空。然后在 CSS 中使用定位将其向上移动多远。

position: relative;
top: -165px;

您可以根据需要使用相对或绝对位置。

然后简单地将那个 div 标签作为锚标签。

<div class="anchor_placement" id="anchor"></div>

当你去锚点时，它会去到任何 div 标签所在的地方。

【讨论】：

【解决方案4】：

你试过 jQuery scrollTo 插件吗？似乎这已被用于一些调整来做你想做的事。在此处查看场景/答案Jquery ScrollTo issue

【讨论】：

【解决方案5】：

Gu3miles - 这对我来说非常有效 - 我正在使用带有持久导航栏的锚点。

.anchorplace{position: relative;
top: -74px; }

<div class="anchorplace" id="challenge"></div>

【讨论】：