2013-04-13 3 views
0

페이지의 다른 위치로 이동해야하는 탐색 기능을 사용하여 연속 스크롤되는 웹 페이지를 작성합니다. this example을 따르고 jQuery 부드러운 스크롤 효과를 구현하려고합니다. HTML이 잘 작동합니다. 링크를 클릭하면 페이지의 다른 부분으로 연결되지만 jQuery 스크롤 효과는 작동하지 않습니다.문제를 원활하게 구현 jQuery로 수직 스크롤링

다음은 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> 

그리고 이것은 지금까지 자바 스크립트입니다 : (정확히 상단까지 연결되는 튜토리얼 웹 페이지에 무엇과 동일)

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

누구나 왜 이것이 나를 위해 일하지 않는지에 대한 아이디어가 있습니까? 고맙습니다!

답변

0

난 그냥 '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(); 
    }); 
}); 
+0

그래서 간단! 작동 중! :) 정말 고맙습니다. –