동적 메뉴/페이지 섹션의 jQuery 스크롤

Question

단일 페이지 단어 누르기 테마를 만들고 있습니다. 새 페이지를 만들 때마다 동적으로 채워지는 메뉴가 있습니다. 각 메뉴 항목에 대해 섹션이 내 페이지에 추가됩니다. 메뉴 항목을 클릭하면 페이지가 섹션으로 스크롤됩니다.

각 섹션에는 클래스 "섹션"과 페이지 이름의 고유 ID가 있습니다. 마찬가지로 각 메뉴 항목에는 클래스 "menu_item"과 페이지 이름의 ID가 있습니다.

페이지를 섹션으로 스크롤하도록 올바른 jQuery를 코딩하는 데 어려움을 겪고 있습니다 (현재는 점프합니다).

jQuery를 :

var $paneTarget = $("body"); 
var $section_name = $('.section').attr('data-slug'); 
var $menu_link = $('.menu_item').attr('data-slug'); 

$('$menu_link').click(function(){ 
    $paneTarget.scrollTo('$section_name', 800); 
    return false; 
}); 

그리고 내 메뉴의 출력 HTML :

<ul class="menu"> 
    <li><a class="menu_item about" data-slug="about" href="#about">About</a></li> 
    <li><a class="menu_item portfolio" data-slug="portfolio" href="#portfolio">Portfolio</a></li> 
    <li><a class="menu_item services" data-slug="services" href="#services">Services</a></li> 
    <li><a class="menu_item test-page" data-slug="test-page" href="#test-page">Test Page</a></li> 
    <li><a class="menu_item home" data-slug="home" href="#home">Home</a></li>   
</ul> 

마지막으로, 내 섹션에 대한 출력 된 HTML

<section class="section" id="about" data-slug="about" ><h1></section> 
<section class="section" id="portfolio" data-slug="portfolio" ><h1></section> 
<section class="section" id="services" data-slug="services" ><h1></section> 
<section class="section" id="test-page" data-slug="test-page" ><h1></section> 
<section class="section" id="home" data-slug="home" ><h1></section> 

내가 겪고있는 문제는 메뉴 항목을 누를 때 각 섹션이 scrollTo 인 페이지를 jQuery로 가져 오는 것입니다. 모든 메뉴 항목과 페이지는 동적으로 만들어 지므로 코드를 추가하여 새 페이지가 추가되도록해야합니다.

Answer 1

실제 문제는 jQuery 코드가 호출되지 않는다는 것입니다. 클릭하면 볼 수 있듯이 을 참조하십시오. alert "here"해야하지만 결코 그렇지는 않습니다. return false이 늦게 호출되면 preventDefault()을 사용하는 것이 좋습니다.

이 같은 시도 :

$('.menu_item').click(function(e){ 
    e.preventDefault(); 
    var id = $(this).attr('data-slug'); 
    $('html,body').animate({ 
     scrollTop: $('#'+id).offset().top 
    }, 1000); 
}); 

http://jsfiddle.net/39sC5/

어떤 jQuery를 버전에 당신이 $('.menu_item').click(function(e)...