如何使用 jquery 和 php 链接到同一页面中的特定部分？答案

【问题标题】：How to link to a specific part in the same page with jquery and php?如何使用 jquery 和 php 链接到同一页面中的特定部分？
【发布时间】：2012-05-26 17:13:19
【问题描述】：

我知道要链接到同一页面中的某个部分，例如：

<a href='#A'>A</a>

<a name='A'>Here is A</a>

但是当我用 jquery 和 php 设计它时，我遇到了问题。我的设计是这样的：有所有的字母。在字母下，有 div（item_A、item_B、item_c 等...）。例如当用户点击K字母时，页面会链接到#K div，并且#K div也会显示其内容。（因为当网站第一次打开时，item div的显示是无的）。但问题是，虽然#K（K只是示例）K显示了它的内容，但页面并没有重定向到#K div。您必须自己滚动。

代码如下：

 <div class="content_letters">
      <ul>
      <?php $array_letter = array("A","B","C","Ç","D","E","F","G","H","I","İ",
                                  "J","K","L","M","N","O","P","R","S","Ş","T",
                                  "U","Ü","V","Y","Z");

      for ($i=0;$i<27;$i++) {

      echo "<li><a id='letter_{$array_letter[$i]}'
            href='#letter_{$array_letter[$i]}'>{$array_letter[$i]} | </a></li>"; 

       }
    ?>
     </ul>
</div>

<?php
    for ($i=0;$i<27;$i++) {
 ?>
    <div class="content_letter_block">
            <div class="text">
            <div class="show_hide">
              <a class="button" id="
               <?php echo 'button_letter_'.$array_letter[$i]; ?>">SHOW/HIDE</a>
            </div>

              <a name="<?php echo "letter_".$array_letter[$i].'">';?>
         <?php  echo $array_letter[$i]; ?></a> starts from here</div>

            </div>                          
    </div>

    <?php } ?>

    <div style='display:none'  id='<?php echo "item_".$array_letter[$i];?>'>    

      Here is item...
    </div>

这里是jquery代码：

 $(document).ready(function() {
 // target everything with IDs that start with 'button_letter'

  $("[id^='button_letter']").click(function () {


// split the letter out of the ID
// of the clicked element and use it to target
// the correct div

$("#item_" + this.id.split("_")[1]).toggle();
});

$("[id^='letter']").click(function () {
$("#item_" + this.id.split("_")[1]).show();

});
});

【问题讨论】：

标签： php jquery html hyperlink href

【解决方案1】：

您也可以在您的网址中指定一个锚点。

<a href="your-page.html#k" />

当您单击链接时，您将被带到该页面，文档将自动滚动到<a name="k">的位置

【讨论】：

【解决方案2】：

要使用 jQuery 滚动到页面中的特定 ID，请使用

$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');

【讨论】：

【解决方案3】：

没有时间查看所有代码，但无法使用 scrollTop() 方法？
见here。

【讨论】：