Question

我有一个完整的自举布局，其高度为固定导航栏140px，每个div部分都通过导航链接。当我点击链接转到关于部分时，它似乎直接转到h2标签而不是关于部分div的开头。有没有办法可以用js来修复截止问题？

<ul>
<li><a href>#about</a></li>
</ul>

section {padding：5em 0 5em 0}

<section id="about">
    <div class="container">
    <div class="text-center">
    <h2>About</h2>
    <h3>About Subheading</h3>
        <div class="about">
            <div class="row">
                <div class="col-lg-12">
                  </div>
                </div>

            </div>
        </div>
    </div>
    </div>
    </div>
</section>

Answer 1

试试这个

已编辑的代码视图

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top - 140
        }, 1000);
        return false;
      }
    }
  });
});

Answer 2

只是尝试过自己，我无法重现您的问题：

http://jsfiddle.net/DTcHh/27912/

您发布的html中存在多个错误，例如缺少href属性和额外</div>结束标记

链接到部分div的顶部

2 个答案: