Question

我正在构建单页网站，需要“滚动到部分导航”，我使用此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没有样式且仍然有效。

真的很感激任何帮助。提前谢谢！

Answer 1

http://jsfiddle.net/gUWdJ/609/

那里很好用。你是否有可能阻止此脚本的其他js错误？

@EDIT：试试这段代码：你错过了班级定义中的一点！ $('.navi a')。

$(document).ready(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;

});
});

如果你不想要任何动画，你可以使用这个简单的锚点：

<nav>

<a href="#top">TOP</a>

<a href="#news">NEWS</a>

<a href="#products">PRODUCTS</a>

<a href="#contact">CONTACT</a>

</nav>

http://jsfiddle.net/gUWdJ/608/

Answer 2

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

<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')。希望这澄清一点。

滚动到部分导航问题

2 个答案: