Targeting a DIV in HTML - html

Question

How can I target a div without missing the title part? Let's say I have this code:
<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>
and for the button:
<a class="btn btn-warning" href="index.php?pl1=about#Feeding" role="button">Learn more</a>
But whenever I click the button, it looks like this:
Output
When it should look like this:
How it should be
So maybe it's my navbar that messes the content? Is it something that I can fix with css? I tried putting the ID on the <h2>, but the result is the same.

Answer 1

Your code is working correctly, clicking you anchor scrolls the page so that the h2 is in the top. Problem is with your menu that has fixed positioning and is overlapping it.
This should be fixable with JS by overriding default a behaviour and writing your custom logic that adds the height of your navbars to the target scroll position, like so:
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');
}
You need to trigger this function when clicking on an item that is supposed to do the scroll. Assuming your a looks like this:
<a class="menu-item btn btn-warning" href="Feeding" role="button">Learn more</a>
you can use do:
$('a.menu-item').click(function(){
scrollToAnchor($(this).attr('href'));
});
But if you want to use a full path in your a that does the page reload and than scrolls to the id than your're gonna need to play with reading an url, extracting value after hash and than triggering scrollToAnchor, like t his:
$(document).ready(function(){
if(window.location.hash) {
var hash = window.location.hash;
scrollToAnchor(hash);
}
});
Here's the working demo on jsFiddle: http://jsfiddle.net/ony0590k/