jquery - 滚动到部分导航问题

我正在构建一个单页网站，并且需要“滚动到部分导航”，我将此jsfiddle用作基本模板。如您所见，它像一种魅力一样工作，但是由于某些原因，在我的网站上它似乎不起作用，我在下面粘贴了两个重要的代码段

<!-- THIS IS A SECTION -->

<section id="about" data-anchor="about">
  <div id="about-wrap">
    <h1>I'm a really cool title about<br>Small Space Living</h1>
    <p>Lorem ipsum dolor sit amet, consectetur ...esse.</p>
    <a class="link" href=""><span>Learn More</span></a>
  </div>
</section>


<!-- THIS IS MY NAVIGATION -->

<div class="navbar pull-right">
  <ul class="navi">
    <li><a href="#" data-scroll="about">About Us<hr></a></li>
    <li><a href="#" data-scroll="solutions">Solutions<hr></a></li>
    <li><a href="#" data-scroll="contact">Contact Us<hr></a></li>
  </ul>
</div>


<!-- THIS IS MY JQUERY -->

<script>
$(document).ready(function(){
$(function(){
$('navi a').on('click', function() {

    var scrollAnchor = $(this).attr('data-scroll'),
        scrollPoint  = $('section[data-anchor="'+scrollAnchor+'"]').offset().top -10;

   $('body,html').animate({
       scrollTop: scrollPoint
   }, 500);

   return false;

})

$(window).scroll(function() {

});

$(window).scroll(function() {

    if ($(window).scrollTop() >= 100) {

        $('nav').addClass('fixed');

    } else {

        $('navi').removeClass('fixed');

    }

});
});//]]>
});
</script>

有相当数量的CSS，但我无法想象这是一个样式问题，因为jsfiddle的样式为零，并且仍然有效。

任何帮助将不胜感激。提前致谢！

最佳答案

我创建了一个包含以下内容的文件：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>
window.onload = function() {

$('nav a').on('click', function() {

    var scrollAnchor = $(this).attr('data-scroll'),
        scrollPoint  = $('section[data-anchor="'+scrollAnchor+'"]').offset().top -10;

   $('body,html').animate({
       scrollTop: scrollPoint
   }, 500);

   return false;

})

$(window).scroll(function() {

    if ($(window).scrollTop() >= 100) {

        $('nav').addClass('fixed');

    } else {

        $('navi').removeClass('fixed');

    }
});

}
</script>
<header></header>

<nav>

    <a href="#" data-scroll="top">TOP</a>

    <a href="#" data-scroll="news">NEWS</a>

    <a href="#" data-scroll="products">PRODUCTS</a>

    <a href="#" data-scroll="contact">CONTACT</a>

</nav>



    <section id="top" data-anchor="top">

        <h4>TOP</h4>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolor elementum vel. Aliquam eu nulla eros, et tincidunt felis. Pellentesque congue sodales eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit nulla vel nisi fermentum ultricies. Integer ligula elit, gravida ac pretium nec, eleifend ultrices purus. Duis cursus orci et urna accumsan tempor. Nunc mattis tincidunt nulla, id porta velit sollicitudin blandit.</p>

            <p>Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris dictum nisl eget lorem pulvinar sit amet bibendum nunc scelerisque. Suspendisse ac libero magna, at imperdiet leo. Pellentesque vulputate venenatis vestibulum. Aenean varius turpis quis sem adipiscing volutpat. Fusce scelerisque iaculis augue, eget fringilla velit mattis nec. Maecenas sagittis dolor eget felis cursus imperdiet. Morbi ut dui libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet mi ac diam semper hendrerit a id tellus. Morbi accumsan magna sit amet velit ultricies ut dapibus justo rutrum. Ut et ante dui, vel pellentesque velit.</p>

    </section>

    <section id="news" data-anchor="news">

        <h4>NEWS</h4>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolor elementum vel. Aliquam eu nulla eros, et tincidunt felis. Pellentesque congue sodales eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit nulla vel nisi fermentum ultricies. Integer ligula elit, gravida ac pretium nec, eleifend ultrices purus. Duis cursus orci et urna accumsan tempor. Nunc mattis tincidunt nulla, id porta velit sollicitudin blandit.</p>

            <p>Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris dictum nisl eget lorem pulvinar sit amet bibendum nunc scelerisque. Suspendisse ac libero magna, at imperdiet leo. Pellentesque vulputate venenatis vestibulum. Aenean varius turpis quis sem adipiscing volutpat. Fusce scelerisque iaculis augue, eget fringilla velit mattis nec. Maecenas sagittis dolor eget felis cursus imperdiet. Morbi ut dui libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet mi ac diam semper hendrerit a id tellus. Morbi accumsan magna sit amet velit ultricies ut dapibus justo rutrum. Ut et ante dui, vel pellentesque velit.</p>

    </section>

    <section id="products" data-anchor="products">

        <h4>PRODUCTS</h4>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolor elementum vel. Aliquam eu nulla eros, et tincidunt felis. Pellentesque congue sodales eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit nulla vel nisi fermentum ultricies. Integer ligula elit, gravida ac pretium nec, eleifend ultrices purus. Duis cursus orci et urna accumsan tempor. Nunc mattis tincidunt nulla, id porta velit sollicitudin blandit.</p>

            <p>Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris dictum nisl eget lorem pulvinar sit amet bibendum nunc scelerisque. Suspendisse ac libero magna, at imperdiet leo. Pellentesque vulputate venenatis vestibulum. Aenean varius turpis quis sem adipiscing volutpat. Fusce scelerisque iaculis augue, eget fringilla velit mattis nec. Maecenas sagittis dolor eget felis cursus imperdiet. Morbi ut dui libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet mi ac diam semper hendrerit a id tellus. Morbi accumsan magna sit amet velit ultricies ut dapibus justo rutrum. Ut et ante dui, vel pellentesque velit.</p>

    </section>

    <section id="contact" data-anchor="contact">

        <h4>CONTACT</h4>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolor elementum vel. Aliquam eu nulla eros, et tincidunt felis. Pellentesque congue sodales eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit nulla vel nisi fermentum ultricies. Integer ligula elit, gravida ac pretium nec, eleifend ultrices purus. Duis cursus orci et urna accumsan tempor. Nunc mattis tincidunt nulla, id porta velit sollicitudin blandit.</p>

            <p>Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris dictum nisl eget lorem pulvinar sit amet bibendum nunc scelerisque. Suspendisse ac libero magna, at imperdiet leo. Pellentesque vulputate venenatis vestibulum. Aenean varius turpis quis sem adipiscing volutpat. Fusce scelerisque iaculis augue, eget fringilla velit mattis nec. Maecenas sagittis dolor eget felis cursus imperdiet. Morbi ut dui libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet mi ac diam semper hendrerit a id tellus. Morbi accumsan magna sit amet velit ultricies ut dapibus justo rutrum. Ut et ante dui, vel pellentesque velit.</p>

    </section>

然后我将其另存为index.html。打开它，它起作用了。

您遇到的主要问题是$('navi a')，我将其更改为'$（'nav a'）`。我想有个小错字让您抓狂。

编辑
我觉得我应该解释得更好。您不应该使用.navi，因为它是指对象的类：。您不应该使用#navi，因为它是指对象的ID ：。使用navi引用一个对象。由于您想引用标签，因此我们使用$('nav')。希望这可以澄清一点。