0

我正在使用 Jquery ScrollTo，这样当我单击页面顶部的问题时，它将滚动到问题并在屏幕下方进一步回答。这个功能工作正常（到一点）

现在，当我点击一个问题时，它会在页面的中间滚动，我的导航栏将与问题的一半重叠（我使用的是 twitter bootstrap 固定导航栏）

第二个问题是，当我单击顶部（应该滚动回页面顶部）时，前 3 个问题与导航栏重叠。

如果我从导航栏中删除固定，那么一切正常，但我更愿意保持导航栏固定

我的代码如下

看法

<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 道歉，但使用引导程序）

4

1 回答 1

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();
    });
});​
于 2012-05-02T19:50:18.667 回答