在HTML中定位DIV

如何在不丟失標題部分的情況下定位div？比方說，我有這樣的代碼：在HTML中定位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>上，但結果是一樣的。

來源

2014-12-28 Benedict Payot

也提供了css代碼，就像cod-md-5 –

well col-md-5是bootstrap css文件的一部分。它只是將頁面分成多列。我相信它不需要那樣做。 –

你可以創建一個jsfiddle嗎？ –

你的代碼工作正常，單擊你錨點滾動頁面，使h2位於頂部。問題在於您的菜單具有固定的位置並與其重疊。

這應該通過重寫默認a行爲和寫作，增加了您的導航欄的高度與目標滾動位置，像這樣的自定義邏輯是可以解決的與JS：

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>

你可以用做：

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

但是，如果你想使用的完整路徑在a，做的頁面重載，比滾動到ID比your're會需要讀取URL，哈希後提取值比觸發scrollToAnchor，如T他的發揮：

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

這裏的jsFiddle上的工作演示：http://jsfiddle.net/ony0590k/

來源

2014-12-28 15:53:13 bwitkowicz

嘗試刪除固定類，現在看起來很好。那麼我現在的問題是我的導航欄。我不能對此做點什麼嗎？ –

我會試試看。感謝您提出我的問題。 –

我已經爲您製作了一個工作演示，請查看我的更新答案，如果最終使用我的解決方案，請接受它。 – bwitkowicz

在HTML中定位DIV

回答

相關問題