Question

如何在不错过标题部分的情况下定位div？假设我有这段代码：

<div class="row featurette" id="Feeding">
    <div class="col-md-7">
         <h2 class="featurette-heading">1. Transformational Feeding </h2>
         <p class="lead text-justify">As TransDev provides supplemental feeding (lunch three times per week) to undernourished school children, the mothers of the participating children are encouraged to  plant vegetables to ensure availability of food on the table. With the increase in price of commodities, food production, will provide an additional income for the family.</p>
    </div>
    <div class="col-md-5">
         <img class="featurette-image img-responsive" src="contents/gallery/7.jpg" alt="Generic placeholder image">
    </div>
</div>

和按钮：

<a class="btn btn-warning" href="index.php?pl1=about#Feeding" role="button">Learn more</a>

但每当我点击按钮时，它看起来像这样：

Output

什么时候看起来像这样：

How it should be

所以也许是我的navbar混淆了内容？这是我能用css修复的东西吗？我尝试将ID放在<h2>上，但结果是一样的。

Answer 1

您的代码工作正常，点击您的锚点滚动页面，以便h2位于顶部。问题在于您的菜单具有固定的定位并且与其重叠。

这可以通过覆盖默认的a行为并编写将导航栏的高度添加到目标滚动位置的自定义逻辑来解决，如下所示：

function scrollToAnchor(id){
    var navbarHeight = $(".menu").height(); // or whatever seletor you use for navbar
    var aTarget = $(id);
    $('html,body').animate({scrollTop: aTarget.offset().top-navbarHeight},'slow');
}

单击应该执行滚动的项目时，需要触发此功能。假设您的a看起来像这样：

<a class="menu-item btn btn-warning" href="Feeding" role="button">Learn more</a>

你可以使用do：

$('a.menu-item').click(function(){
    scrollToAnchor($(this).attr('href'));
});

但是如果你想在你的a中使用一个完整路径来重新加载页面，而不是滚动到id，那么你需要阅读一个url，在hash和hash之后提取值而不是触发scrollToAnchor，就像他的：

$(document).ready(function(){
    if(window.location.hash) {
        var hash = window.location.hash;
        scrollToAnchor(hash);
    }
});

这是jsFiddle的工作演示：http://jsfiddle.net/ony0590k/

以HTML格式定位DIV

1 个答案: