Jquery ScrollTo issue

I am using Jquery ScrollTo so that when I click a question at the top of the page it will scroll to the question and answer further down the screen. This function works ok ( To a point)

Now when I click to a question that is say halfway down the page it will scroll and my navbar will overlap half of the question ( i am using twitter bootstrap fixed navbar)

The second issue is that when I click Top ( should scroll back to top of page) the first 3 questions are overlapped by the navbar.

If I remove the fixed from the navbar then it all works OK but i would prefer to keep the navbar fixed

My code is as follows

View

<div class="links">

<ul class="top_links"> 

    <li><a href="#1a">Question 1</a></li>
    <li><a href="#1b"> Question 2</a></li>
    <li><a href="#1c"> Question 3</a></li>
    <li><a href="#1d">Question 4</a></li>
    <li><a href="#1e">Question 5</a></li>

</ul>

    </div>
    <ul class="faq">
<li><a name="1a"></a><span class="question">Q: Question 1</span><span        class="answer">Follow the link marked join which will take you to the relevant section.We review each application for membership and aim to let you know within qo working days.</span><div class="top"><a href="#top">Top ^</a></div></li>

<li><a name="1b"></a><span class="question">Q:Question 2</span><span class="answer">A:  Follow the link marked Forensic Odontologist list which will take you to the page where Odontologists are listed by region with full contact details..</span><div class="top"><a href="#top">Top ^</a></div></li>

<li><a name="1c"></a><span class="question">Q: Question 3</span><span class="answer">A: Unfortunately the subject is case dependent, which cannot be predicted. It is not a full time discipline. For this reason it is generally not possible to shadow an Odontologist - sorry.</span><div class="top"><a href="#top">Top ^</a></div></li>

<li><a name="1d"></a><span class="question">Q: Question 4</span><span class="answer">A: You should look at the available courses by following the link marked courses and then contact the particular institution directly and not through BAFO.</span><div class="top"><a href="#top">Top ^</a></div></li>

<li><a name="1e"></a><span class="question">Q:Question 5</span><span        class="answer">A: Nunc non orci eget odio suscipit rutrum. Nullam quam neque, tempus at, semper in, semper eu, mi. Nulla eu turpis vitae arcu sagittis iaculis. Fusce ut nunc vel ligula convallis vulputate. Aliquam feugiat dui in risus. Sed hendrerit. Praesent mollis, ligula imperdiet viverra faucibus, diam turpis ullamcorper ipsum, eget posuere velit tellus et turpis. Vivamus facilisis est nec libero. Phasellus at velit. Vivamus sed mauris.</span><div class="top"><a href="#top">Top ^</a></div></li>

Jquery

$(document).ready(function () {
$.localScroll();
$(".top_links > li > a").click(function () {
    $(".faq > li").removeClass('highlight');

    var str = $(this).attr("href");
    str = "a[name='" + str.substring(1) + "']";
    $(str).parent().addClass('highlight');


});

});

Im hoping that this is enough information to go on. If any one can make any suggestions then they will be greatly appreciated

Example is here http://jsfiddle.net/richlewis14/YsK29/ ( apologies for the massive css but using bootstrap)

Your site is correctly scrolling. Problem is that Your navbar is stacked to top and covers content. I write it a lil bit different than You but it works:

$(document).ready(function () {
    var navHeight = $('.navbar').height(); //get the navbar height

    $(".top_links > li > a").click(function (e) {
        $(".faq > li").removeClass('highlight');

        var str = $(this).attr("href");
        str = "a[name='" + str.substring(1) + "']";
        $(str).parent().addClass('highlight');
        e.preventDefault(); // prevent adding something to url
        var offset = $('.highlight').offset(); //get highlight position from top of page

        $('html, body').scrollTop(offset.top-navHeight); // scroll to correct position
    });

    $('.top').find('a').on('click', function(e){
       $('html, body').scrollTop(0);
       e.preventDefault();
    });
});