jquery tablesorter plus javascript / jquery offset conflict

Question

I seem to be having a conflict with jquery tablesorter plugin in conjunction with javascript scrollTo and some of jQuery fancier equivalents. In each case, after I dynamically add content, the "scroll to location" does not seem to take into account space taken by dynamically added content. I tried several different approaches with same results. Code below can be copied and tested directly.

    <link href="http://tablesorter.com/themes/blue/style.css" rel="stylesheet">
    <script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>

<script>
 $( document ).ready(function() {       

         var tableCode =                                                                                          
            "<tr>" +                                                                                      
            "<th>" + 'Seq' + "</th>" +                                                                    
            "<th>" + 'Column 1' + "</th>" +
            "<th>" + 'Column 2' + "</th>" +
            "<th>" + 'Column 3' + "</th>" +
            "<th>" + 'Column 4' + "</th>" +
            "<th>" + 'Column 5' + "</th>" +
            "<th>" + 'Column 6' + "</th>" +
            "<th>" + 'Column 7' + "</th>" +
            "<th>" + 'Column 8' + "</th>" +
            "</tr>";

        var tableDetail = 
            "<tr>" +                               
            "<td>" + "some text " + "</td>" +   
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "</tr>";  

        // append headers
        $('table thead').append(tableCode);                

        // apply tablesort magic
        $("table").tablesorter();               

        // apply tablesort logic to first line of table    
        $('table').trigger("update");          


    // Listeners
    $('#mybutton').click(function() {
        // append each new line
        $('table tbody').append(tableDetail);                
        $('#spacer').append("<br/>");

        // apply tablesort magic to each line
        $('table').trigger("update");                               
    });

    $("a").click(function() {       
        scrollToAnchor(this.name);

    });


    function scrollToAnchor(location){
        var aTag = $("a[name='"+ location +"']");                          
        $('html,body').animate({scrollTop: aTag.offset().top},'slow');     
        console.log(aTag);
        console.log(aTag.offset().top);
  }                                                                    



}); // end document ready

</script>
<a ref='#home'></a>

<!-- <p>This cute jQuery add-in, called <a href='http://tablesorter.com/docs/index.html' target='_blank'>tablesort.js</a> permits formated tables with sortable columns.</p> -->

<button id='mybutton'>Click me to add rows to tables</button>
<br/><br/>
<a href="#" name='tag1'>Goto Tag 1</a><br/>
<a href="#" name='tag2'>Goto Tag 2</a><br/><br/>

<div id='spacer'></div>

<a ref='#tag1'></a>TAG 1
<a href="#" name='home'>Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>


<a ref='#tag2'></a>TAG 2
<a href="#" name='home'>Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>

Answer 1

First off, the anchors need to be changed. I prefer to use id instead of name; also ref is not a valid attribute (demo)

<a id="home"></a>
...
<a href="#tag1">Goto Tag 1</a>
<br/>
<a href="#tag2">Goto Tag 2</a>
...
<a id="tag1"></a>TAG 1
<a href="#home">Go to top</a>
...
<a id="tag2"></a>TAG 2
<a href="#home">Go to top</a>

Then change the code as follows:

$("a").click(function () {
    scrollToAnchor(this.hash);
    // prevent jump to anchor
    return false;
});

function scrollToAnchor(location) {
    var aTag = $(location);
    $('html,body').animate({
        scrollTop: aTag.offset().top
    }, 'slow');
}

Lastly, there is no need to update tablesorter immediately after initializing it:

// append headers
$('table thead').append(tableCode);

// apply tablesort magic
$("table").tablesorter();

// apply tablesort logic to first line of table    
// $('table').trigger("update"); <--- ***** REMOVE THIS *****

Answer 2

All excellent advice... Here is revised code, working 100% ! A shout out to some great work on tablesorter documentation, fixes and enhancements. http://wowmotty.blogspot.ca/2011/06/jquery-tablesorter-missing-docs.html

    <script src="js/jquery.js"></script>
    <link href="http://tablesorter.com/themes/blue/style.css" rel="stylesheet">
    <script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>

<script>
 $( document ).ready(function() {       

         var tableCode =                                                                                          
            "<tr>" +                                                                                      
            "<th>" + 'Seq' + "</th>" +                                                                    
            "<th>" + 'Column 1' + "</th>" +
            "<th>" + 'Column 2' + "</th>" +
            "<th>" + 'Column 3' + "</th>" +
            "<th>" + 'Column 4' + "</th>" +
            "<th>" + 'Column 5' + "</th>" +
            "<th>" + 'Column 6' + "</th>" +
            "<th>" + 'Column 7' + "</th>" +
            "<th>" + 'Column 8' + "</th>" +
            "</tr>";

        var tableDetail = 
            "<tr>" +                               
            "<td>" + "some text " + "</td>" +   
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "</tr>";  

        // append headers
        $('table thead').append(tableCode);                

        // apply tablesort magic
        $("table").tablesorter();               

        // apply tablesort logic to first line of table    
        // $('table').trigger("update");          


    // Listeners
    $('#mybutton').click(function() {
        // append each new line
        $('table tbody').append(tableDetail);                
        $('#spacer').append("<br/>");

        // apply tablesort magic to each line
        $('table').trigger("update");                               
    });

    $("a").click(function() {       
        scrollToAnchor(this.hash);
        return false;
    });


    function scrollToAnchor(location){      
        var aTag = $(location);
        console.log(aTag.offset().top);
        console.log(location);
        $('html,body').animate({
            scrollTop: aTag.offset().top
        }, 'slow');
    }                                                                        

}); // end document ready

</script>
<a id='home'></a>

<button id='mybutton'>Click me to add rows to tables</button>
<br/><br/>
<a href="#tag1">Goto Tag 1</a><br/>
<a href="#tag2">Goto Tag 2</a><br/><br/>

<div id='spacer'></div>

<a id='tag1'/>TAG 1
<a href="#home">Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>


<a id='tag2'/>TAG 2
<a href="#home" >Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>