Jquery ScrollTo问题 | ScrollTo问题

本文介绍了Jquery ScrollTo问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用Jquery ScrollTo，当我点击页面顶部的一个问题，它会滚动到问题，并在屏幕上进一步回答。这个函数工作正常（到一点）

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)

现在，当我点击一个问题，说下半部分的页面，它会滚动，我的导航栏将重叠一半的问题（我使用twitter bootstrap固定导航栏）

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)

第二个问题是，当我点击顶部（应滚动回到页面顶部）前3个问题被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.

如果我从navbar中删除固定，那么一切正常，但我宁愿保持navbar固定

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

我的代码如下

查看

<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

示例是这里（对于大规模的CSS，但使用引导）

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

这篇关于Jquery ScrollTo问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！