动态菜单和Javascript滚动

我在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;
?>  

所以这很好用，但我需要一个菜单，当点击时滚动到每个部分。因此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>

var bbg=jQuery.noConflict（）；
bbg（“#”）。单击（函数（）{
bbg（'html，body'）。设置动画({
scrollTop:bbg（“#”）offset（）.top
}, 1000);
});

问题是如何将这些方面结合起来，我尝试将脚本放入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;
?>  

原始版本的按钮和部分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>


var bbg=jQuery.noConflict（）；
bbg（“.”）。单击（函数（）{
bbg（'html，body'）。设置动画({
scrollTop:bbg（“#”）offset（）.top
}, 1000);
});

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