How to link to a specific part in the same page with jquery and php?

问题

I know to link to a part in the same page like :

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

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

But when I designed it with jquery and php, ı have a problem. My design is like : There are all letters of alphabet. Under the letters, there are there are divs (item_A,item_B,item_c etc...). When the user click K letter for example, page will link to #K div and also #K div display its content.(Because when the site open first, item divs' display are none). But the problem is, although #K (K is just example) K is displayed its content, page did not redirect to #K div. You must scroll by yourself.

Here is the code :

 <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>

Here is the jquery code :

 $(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();

});
});

回答1:

Don't have the time to see all your code, but can't use a scrollTop() method ?
See here.

回答2:

To scroll with jQuery to a specific ID in your page, use

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

回答3:

You can specify an anchor in your url as well.

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

When you click the link you will be taken to that page and the document will scroll automatically to the position of <a name="k">

来源：https://stackoverflow.com/questions/10664312/how-to-link-to-a-specific-part-in-the-same-page-with-jquery-and-php

标签

php

jquery

html

hyperlink

href