動態菜單/頁面部分上的jQuery滾動條

我正在創建單個頁面的單詞按主題。每當創建新頁面時，我都有一個動態填充的菜單，對於每個菜單項，都會將一個部分添加到我的頁面中。當您單擊菜單項時，頁面向下滾動到該部分。動態菜單/頁面部分上的jQuery滾動條

每個部分都有一個類「部分」和頁面名稱的唯一標識。同樣，每個菜單項都有一個「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>

我遇到的問題是使用jQuery，當我按下菜單項時，每個部分都會獲得scrollTo的頁面。請記住，所有菜單項和頁面都是動態創建的，所以我需要對其進行編碼，以便覆蓋正在添加的新頁面。

來源

2014-02-27 Sam Skirrow

使用'。對（）'，而不是'。點擊（）'處理委派的事件 – dreamweiver

實際的問題是，你的jQuery代碼永遠不會被調用。見here，你可以看到它應該是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)...到$('.menu_item').on('click', function(e)...

來源

2014-02-27 10:03:54 caramba

動態菜單/頁面部分上的jQuery滾動條

回答

相關問題