Question

我正在使用命名锚标签来超链接到另一页上的div。这些超链接落在div的中间，导致无法看到关键标题。例如，这个link落在div的中间，这就是它的样子：

我希望它落在“令人敬畏的服务说明”标题上，登陆时应如下所示：

相关守则是：

<div class="container" id="Cloud">

      <div class="three-fourth last-in-row">
        <!-- Intro -->
        <h1 class="intro-header">Awesome <strong>service</strong> description</h1>
        <p class="intro" style="padding:3%; margin-left: -2.5%;">Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. Lorem ipsum dolor sit amet. Consectetur adipiscing elit.</p>
        <!-- End of intro -->
        <p style="margin:0;">Donec a lectus lectus. Nullam sed lorem lacus. Aliquam et porttitor velit. Aenean bibendum, mauris id rhoncus egestas, tellus leo imperdiet turpis, ac tincidunt lacus sem vitae nisl. Sed sit amet urna ut neque dapibus imperdiet at at orci. Proin diam lectus, fringilla eu volutpat id, tristique ut nisi. Suspendisse sed nulla sed erat scelerisque consequat at ac quam. Maecenas mattis at turpis sit amet sagittis. </p>
        <h3 style="padding:2%;"><strong>Why</strong> Us?</h3>
        <ul class="check">
            <li>Quisque mollis, nunc porta sodales tincidunt, ante nunc convallis lacus, et sodales erat libero vitae risus. Sed vehicula, sapien eu egestas dapibus, ipsum elit laoreet tortor, a dapibus justo tortor quis metus. </li>
            <li>Etiam ultricies, lorem at ultrices rutrum, massa ante tempus diam, venenatis varius arcu magna mattis mi.</li>
            <li>Quisque mollis, nunc porta sodales tincidunt, ante nunc convallis lacus, et sodales erat libero vitae risus. Sed vehicula, sapien eu egestas dapibus, ipsum elit laoreet tortor, a dapibus justo tortor quis metus. </li>
            <li>Etiam ultricies, lorem at ultrices rutrum, massa ante tempus diam, venenatis varius arcu magna mattis mi.</li>
        </ul>

我该怎么办？

Answer 1

代码工作正常。
问题是，您使用了固定标题。
您的修复标题重叠了您尝试显示的div的某些部分。

解决方案是。

将该ID提供给“真棒服务”上方的“服务功能” 描述”。 Here

Answer 2

你可能会得到一个滚动动画来添加一些额外的像素来向下推动你的页面以显示你标题下的锚点：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
var getId   =   $(window.location.hash);
var Offset  =   getId.offset();
$("html, body").animate({ scrollTop: (Offset.top-120) }, 'slow');
</script>

登记在div中间的命名锚标记而不是顶部

2 个答案: