JQuery ScrollTo issue

Question

Я использую Jquery ScrollTo, поэтому, когда я нажимаю на вопрос в верхней части страницы, он будет прокручивать вопрос и отвечать дальше по экрану. Эта функция работает нормально (К точке)

Теперь, когда я нажимаю на вопрос, который говорит, на полпути вниз страницы, она будет прокручиваться и мой Navbar будет перекрывать половину вопроса (я использую Twitter Bootstrap фиксированной Navbar)

Вторая проблема заключается в том, что когда я нажимаю «Вверх» (должен прокручиваться назад к началу страницы), первые 3 вопроса перекрываются навигационной панелью.

Если я удалить неподвижная из навигационной панели, то все работает нормально, но я бы предпочел, чтобы держать Navbar фиксированной

Мой код выглядит следующим образом

Просмотр

<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'); 


}); 

});

Я надеюсь, что этого достаточно, чтобы продолжить. Если какой-либо один может сделать какие-либо предложения, то они будут весьма благодарны

Пример здесь http://jsfiddle.net/richlewis14/YsK29/ (извинения за массивным CSS, но с использованием начальной загрузки)

Answer 1

Ваш сайт правильно прокруткой. Проблема в том, что ваш навигатор уложен сверху и охватывает контент. Я пишу это лил немного отличается от вас, но это работает:

$(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(); 
    }); 
});​