0

私はJquery ScrollToを使用しているので、ページの上部にある質問をクリックすると、質問にスクロールして画面のさらに下に回答します。この機能は問題なく動作します（ポイントまで）

ページの途中にある質問をクリックすると、スクロールし、ナビゲーションバーが質問の半分に重なって表示されます (私は Twitter ブートストラップ固定ナビゲーションバーを使用しています)。

2 つ目の問題は、[トップ] をクリックすると (ページのトップに戻る必要があります)、最初の 3 つの質問がナビゲーション バーと重なって表示されることです。

navbar から固定を削除すると、すべて正常に動作しますが、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>

Jクエリ

$(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 に答える