jQuery Scroll to Anchor Within Div_问答_开发者

I'm trying to get it to where I can scroll #page to the anchor within the ajax response which is displayed withinin the #page div. The below code works for the first click, but not for subsequent clicks. What gives? Thank you for your time...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xlm:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Example</title>
 <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>resources/js/jqueryFileTree.css" media="all" />

 <script type="text/javascript" src="<?php echo base_url(); ?>resources/js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="<?php echo base_url(); ?>resources/js/jqueryFileTree.js"></script>



 <script type="text/javascript">
     $(document).ready(function() {

  $("#tree").fileTree(
      {root: 'county_code/',
      script: 'welcome/get_code',
      expandSpeed: 250,
      collapseSpeed: 250
      },

      function(file) {
   var split = file.split('/');
   var anchor = '#x' + split[split.length-1];
   var last_chapter = split[split.length-2];
   if ($("#last_chapter").html() != last_chapter) {
       $("#page").html('Loading...');
       $.ajax({
    type: 'post',
    url: 'welcome/get_page',
    data: {page: file},
    success: function(resp) {
        $("#page").html(resp);
        $("#page").prepend('<div id="last_chapter">' + last_chapter + '</div>');

        anchor = anchor.replace(".", "");
        console.log($("#page").offset().top);
 开发者_Go百科       console.log($(anchor).offset().top);
        var scrollTo = $(anchor).offset().top - $("#page").offset().top;
        console.log(scrollTo);
        $("#page").animate({scrollTop: scrollTo}, "slow");
    }
       });
   } else {
       var split = file.split('/');
       var anchor = '#x' + split[split.length-1];
       anchor = anchor.replace(".", "");
       console.log($("#page").offset().top);
       console.log($(anchor).offset().top);
       var scrollTo = $(anchor).offset().top + 246;
       console.log(scrollTo);
       $("#page").animate({scrollTop: scrollTo}, "slow");
   }

      });
     });
        </script>

 <style type="text/css">
        body {
  background-color: #fff;
  margin: 40px;
  font-family: Lucida Grande, Verdana, Sans-serif;
  font-size: 12px;
  color: #4F5155;
 }
 img.loading {
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-top: 150px;
 }
 a {
  color: #003399;
  background-color: transparent;
  font-weight: normal;
 }

 h1 {
  color: #444;
  background-color: transparent;
  border-bottom: 1px solid #D0D0D0;
  font-size: 16px;
  font-weight: bold;
  margin: 24px 0 2px 0;
  padding: 5px 0 6px 0;
 }
 h2 {
  color: #444;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
  margin: 10px 0 2px 0;
  padding: 5px 0 6px 0;
  text-align: center;
 }
 h3 {
  color: #444;
  background-color: transparent;
  font-size: 12px;
  font-weight: bold;
  margin: 20px 0 2px 0;
  padding: 5px 0 6px 0;
  text-align: center;
  text-transform: uppercase;
  text-decoration: underline;
 }
 p.section_title span {
     padding-right: 10px;
 }
 p.section_title {
     margin-bottom: 0;
 }
 li {
     padding: 4px 0;
 }
 ol {
     margin-top: 0;
     padding-top: 0;
}
 ol ol {
     list-style-type: lower-alpha;
 }

 p {
     padding: 5px;
 }

 #tree {
     width: 45%;
     float: left;
     margin: 5px;
     border: 1px solid #545454;
     height: 600px;
     overflow: auto;
 }
 #page {
     width: 45%;
     float: left;
     margin: 5px;
     border: 1px solid #545454;
     height: 590px;
     padding: 5px;
     overflow: auto;
 }
 .clear {
     clear: both;
 }
    </style>
    </head>
    <body>
<h1>Demo</h1>

<p>Below you will find a table of contents and the code itself. It is not official, blah blah blah.</p>

<div id="tree"></div>

<div id="page">
    <p>This would be the page content.</p>
</div>

<br class="clear" />

<p><br />Page rendered in {elapsed_time} seconds</p>

</body>
</html>

The ajax response (just a sample...):

<h2>Chapter 1</h2>
    <h3>General Provisions</h3>
    <p id="x1010" class="section_title">
    <span>1.010</span> <u>County Code: Title; citation; reference.</u>
    </p>
    <ol>
    <li>This code shall be known as the County Code, and it is sufficient to:
        <ol>
        <li>Refer to the code as the County Code in any prosecution for the violation of any provision thereof or in any legal proceeding.</li>
        <li>Designate any ordinance adding to, amending, correcting or repealing all or any part or portion thereof as an addition to, amendment to, correction or repeal of the County Code.</li>
        </ol>
    </li>
    <li>
        Further reference may be had to the chapters, sections and subsections of the County Code, and such references shall apply to that numbered chapter, section or subsection as it appears in the code.
    </li>
    </ol>

    <p id="x1020" class="section_title">
    <span>1.020</span> <u>Definitions.</u> As used in the County Code, unless the context otherwise requires, the words and terms defined in sections 1.030 to 1.180, inclusive, have the
    meanins ascribed to them in those sections.
    </p>

    <p id="x1030" class="section_title">
    <span>1.030</span> <u>"Board of county commissioners" defined.</u> "Board of county commissioners" means the board of county commissioners of County, State.
    </p>

    <p id="x1040" class="section_title">
    <span>1.040</span> <u>"County" defined.</u> "County" means County, State.
    </p>

    <p id="x1050" class="section_title">
    <span>1.050</span> <u>"County commissioners" defined.</u> "County commissioners" means the board of county commissioners of County, State.
    </p>

    <p id="x1060" class="section_title">
    <span>1.060</span> <u>"District health department" defined.</u> "District health department" means the district health department of County, State.
    </p>

    <p id="x1070" class="section_title">
    <span>1.070</span> <u>"District health officer" defined.</u> "District health officer" means the executive officer of the district health department.
    </p>

    <p id="x1080" class="section_title">
    <span>1.080</span> <u>"Intoxicating liquor" defined.</u>
    </p>
    <ol>
    <li>"Intoxicating liquor" means beer, wine, gin, whiskey, cordials, ethyl alcohol or rum, and every liquid or solid, patented or not, containing one-half of 1 percent
        or more of alcohol by volume and which is used for beverage purposes.</li>
    <li>"Intoxicating liquor" is synonymous with "alcoholic beverage."</li>
    </ol>

    <p id="x1090" class="section_title">
    <span>1.090</span> <u>"May" defined.</u> "May is permissive.
    </p>

    <p id="x1100" class="section_title">
    <span>1.100</span> <u>"Month" defined.</u> "Month" means a calendar month unless otherwise expressed.
    </p>

    <p id="x1110" class="section_title">
    <span>1.110</span> <u>"Must" defined.</u> "Must" is mandatory.
    </p>

    <p id="x1120" class="section_title">
    <span>1.120</span> <u>"Oath" defined.</u> "Oath" includes an affirmation or declaration in all cases in which, by law, an affirmation may be substituted
    for an oath, and in such cases "swear" and "sworn" shall be equivalent to "affirm" and "affirmed."
    </p>

    <p id="x1130" class="section_title">
    <span>1.130</span> <u>"Person" defined.</u> "Person" includes a company, partnership, association or corporation as well as a natural person.
    </p>

    <p id="x1140" class="section_title">
    <span>1.140</span> <u>"Planning commission" defined.</u> "Planning commission" means the regional planning commission created by chapter 110 of the County Code or any successor
    planning commission legally created to perform the functions of planning for County.
    </p>

    <p id="x1150" class="section_title">
    <span>1.150</span> <u>"Shall" defined.</u> "Shall" is mandatory.
    </p>

    <p id="x1160" class="section_title">
    <span>1.160</span> <u>"Sheriff" defined.</u> "Sheriff" means the sheriff of County or in the case of his absence or inability to discharge the powers and duties of his office, then the person
    next in command of the County sheriff's department.
    </p>

    <p id="x1170" class="section_title">
    <span>1.170</span> <u>"State" defined.</u> "State" means the State of State.
    </p>

    <p id="x1180" class="section_title">
    <span>1.180</span> <u>"Year" defined.</u> "Year" means a calendar year.
    </p>

    <p id="x1190" class="section_title">
    <span>1.190</span> <u>Construction.</u>
    </p>
    <ol>
    <li>The provisions of the  County Code are to be construed with a view to effect its objects and to promote justice.</li>
    <li>All provisions of the  County Code shall be considered to speak as of the same date, except that in cases of conflict between
        two or more provisions, or of any ambiguity in a provision, reference may be had to the ordinances from which the provisions are derived
        for the purpose of applying the rules of construction relating to repeal or amendment by implication, or for the purpose of resolving the ambiguity.</li>
    <li>The provisions of the  County Code shall be considered as substituted in a continuing way for the prior ordinances repealed by section 2 of the ordinance
        enacting this code.</li>
    <li>The various analyses contained in the  County Code, constituting enumerations or lists of chapters and sections of the  County Code, and the
        descriptive headins or catchlines immediately preceding or within the texts of individual sections, except the section numbers included in the headings or
        catchlines immediately preceding the texts of such sections, do not constitute part of the law.</li>
    <li>Whenever any reference is made to any portion of the  County Code or of any law of the State of State or the United States, such reference
        shall apply to all amendments and additions thereto now or hereafter made.</li>
    </ol>