Question

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

目前我有这个链接：

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

并在页面上链接到：

.span12#how_it_works

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

Answer 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;
   }

Answer 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; }

Answer 3

您是否尝试过jQuery scrollTo插件？似乎已经使用了一些调整来做你想要的。请参阅此处的方案/答案Jquery ScrollTo issue

Answer 4

我有一个漂亮的想法来欺骗你的浏览器。不需要javascript。

创建一个div标签，为其命名。 div是空的。然后在CSS中使用定位将其向上移动到你想要的程度。

position: relative;
top: -165px;

你可以根据你想要的位置来玩相对位置或绝对位置。

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

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

当您转到锚点时，它将转到div标签的任何位置。

Answer 5

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

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

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

如何导航到略高于锚标记？

5 个答案: