Trouble implementing Smooth Vertical scrolling with jQuery

穿精又带淫゛_ 提交于 2019-12-13 07:15:01

问题


I am building a webpage that is continuous scrolling, with a navigation that should jump to a different place on the page. I'm trying to follow this example, and implement a jQuery smooth scrolling effect. The HTML is working fine-- The links take you to a different spot on the page when clicked, but the jQuery scrolling effect is not working.

Here's the important part of the html:

<ul>
  <li><a href="#"><h1>work</h1></a></li>
  <ul class="nav">
    <li><a href="#section1"><p class="nav_p">project1</p></a></li>
    <li><a href="#section2"><p>project2</p></a></li>
    <li><a href="#section3"><p>project3</p></a></li>
    <li><a href="#section4"><p>project4</p></a></li>
    <li><a href="#section5"><p>project5</p></a></li>
    <li><a href="#section6"><p>project6</p></a></li>
    <li><a href="#section7"><p>project7</p></a></li>
    <li><a href="#section8"><p>project8</p></a></li>
  </ul>

<li><a href="#"><h1>about</h1></a></li>

<li><a href="#"><h1>contact</h1></a></li>
</ul>

And this is the javascript so far: (it is exactly the same as what's on the tutorial webpage linked up top)

$(function() {
    $('ul.nav a').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500,'easeInOutExpo');
        event.preventDefault();
    });
});

Anyone have any ideas as to why this isn't working for me? Thank you!


回答1:


I just removed 'easeInOutExpo':

$(function() {
    $('ul.nav a').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500);
        event.preventDefault();
    });
});


来源:https://stackoverflow.com/questions/15986560/trouble-implementing-smooth-vertical-scrolling-with-jquery

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!