带锚的AJAX和JQuery加载

Question

i have the next code to load content from external page.html using JQuery:

SCRIPT:

<script type="text/javascript">     
$(
function(){
var jContent = $( "#content" );

$( "nav ul li a").click(function( objEvent ){
var jLink = $( this ); ...

HTML

<nav>
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</nav>


<div id="content">Here load content</div>

The script works fine, but... i want some content load them to one particular anchor ( page1.html#anchor )

http://www.libelulastudio.com/demo/ajax/01/

What should I add to my script? Thanks

///////////////////////

Hello finally solved with the following code:

<script> $(document).ready(function(){ $("a#dos").click(function(){
      $("#content").load("page2.html", function(responseTxt,statusTxt,xhr){ 
        if(statusTxt=="success")
        $(function() {
    $(document).scrollTop( $("#p2").offset().top );  });
        if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
      });
    }); ...

HTML

<a href="#" id="dos">Go to Product 2</a>

<div id="content">... content ... </div>

Answer 1

Try:

<script lang='javascript'>
        $(document).ready(function(){
            $('.ajaxload').click(function(){
                $('#content_div').load($(this).attr('id')+'.html');
            });
        });
</script>

<nav>
    <ul>
       <li><a class='ajaxload' href="javascript:void(0)" id='page1'>Page 1</a></li>
       <li><a class='ajaxload' href="javascript:void(0)" id='page2'>Page 2</a></li>
       <li><a class='ajaxload' href="javascript:void(0)" id='page3'>Page 3</a></li>
       <li><a href='#page4_content'>Page 4</a></li>
    </ul>
</nav>

<div id='content_div'>
    <!--Here your content gets loaded-->
</div>
<div id='page4_content'>
    <!--Page 4 content here-->
</div>

More info at jQuery AJAX load()