動態菜單和Javascript滾動

Question

我有一個WordPress的網站中的一個小菜單，創建一個菜單，基於通過ACF在自定義帖子類型中創建的部分。在帖子中可以有任意數量的這些部分，並且都具有所需的主標題，然後我將其用作每個部分的ID（參見下面的$name）。我使用了一個while循環創建菜單：

<?php 
    if(have_rows('main_page_content', $case_study->ID)): 
     while (have_rows('main_page_content', $case_study->ID)) : the_row(); 
      $name = get_sub_field('main_heading_1'); 
      $name = str_replace(' ', '_', $name); 
      $name = preg_replace('/[^A-Za-z0-9\-]/', '', $name); 
      $name = strtolower($name); 
      ?> 
      <div id="<?php echo $name ?>" class="case-study-menu"> 
       <?php echo get_sub_field('main_heading_1') ; ?> 
      </div> 
      <script> 
      var bbg = jQuery.noConflict(); 
       bbg("#<?php echo $name ?>").click(function() { 
       bbg('html, body').animate({ 
        scrollTop: bbg("#<?php echo $name ?>").offset().top 
       }, 1000); 
       }); 
      </script> 
      <?php 
     endwhile; 
    endif; 
?> 

我用下面的其他地方的代碼在我的網站只是爲了削減頭名下降到一個單一的字符串作爲每個部分則使用這個作爲一個ID。

$name = get_sub_field('main_heading_1'); 
$name = str_replace(' ', '_', $name); 
$name = preg_replace('/[^A-Za-z0-9\-]/', '', $name); 
$name = strtolower($name); 

所以這個工程很好，但我需要菜單滾動到每個部分點擊。所以JavaScript就需要使用$name，並用它來滾動到與該ID的DIV，所以我得到了這一點：

<script> 
var bbg = jQuery.noConflict(); 
    bbg("#<?php echo $name ?>").click(function() { 
    bbg('html, body').animate({ 
     scrollTop: bbg("#<?php echo $name ?>").offset().top 
    }, 1000); 
    }); 
</script> 

的問題就是如何讓這些方面的共同努力，我試圖把裏面的腳本像下面的while循環，但無論按下哪個按鈕，它都會像100px一樣向下滾動。

<?php 
    if(have_rows('main_page_content', $case_study->ID)): 
     while (have_rows('main_page_content', $case_study->ID)) : the_row(); 
      $name = get_sub_field('main_heading_1'); 
      $name = str_replace(' ', '_', $name); 
      $name = preg_replace('/[^A-Za-z0-9\-]/', '', $name); 
      $name = strtolower($name); 
      ?> 
      <div id="<?php echo $name ?>" class="case-study-menu"> 
       <?php echo get_sub_field('main_heading_1') ; ?> 
      </div> 
      <script> 
      var bbg = jQuery.noConflict(); 
       bbg("#<?php echo $name ?>").click(function() { 
       bbg('html, body').animate({ 
        scrollTop: bbg("#<?php echo $name ?>").offset().top 
       }, 1000); 
       }); 
      </script> 
      <?php 
     endwhile; 
    endif; 
?> 

任何指導我的解決方案？

在此先感謝。

伊恩

Answer 1

原來有按鈕和部分與ID相同的納姆。更改按鈕，而不是ID解決了問題

<script> 
    var bbg = jQuery.noConflict(); 
     bbg(".<?php echo $name ?>").click(function() { 
     bbg('html, body').animate({ 
      scrollTop: bbg("#<?php echo $name ?>").offset().top 
     }, 1000); 
     }); 
</script>