6

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

目前我有这个链接：

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

并在它链接到的页面上：

.span12#how_it_works

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

4

5 回答 5

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 的平滑滚动脚本的修改版本。我已经从滚动中删除了“平滑度”，但是您可以通过像这样为滚动顶部设置动画来添加它：

   if (target.length) {
     $('html,body').animate({
         scrollTop: target.offset().top + 20
    }, 1000);
    return false;
   }
于 2013-04-07T01:57:59.630 回答
1

这对你有用吗？
现场示例
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;
}

如果您只需要清除选定页面上的导航栏，请在有问题的页面上的 body 标记中添加一个类，并仅针对那些特定页面，例如
HTML 

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

CSS 

 body.welcome {
padding-top:40px;
}
于 2013-04-07T03:34:43.690 回答
1

我有一个好主意来欺骗你的浏览器。不需要javascript。

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

position: relative;
top: -165px;

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

然后只需将该 div 标签作为锚标签。

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

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

于 2014-04-28T22:59:56.023 回答
0

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

于 2013-04-07T01:58:49.127 回答
0

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

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

<div class="anchorplace" id="challenge"></div>
于 2014-05-01T18:37:53.523 回答