Preparation code

<div id="one">
<div id="two">
<div id="three">
</div>
</div>
</div>
<style>
#one
{
position: absolute;
top: 20px;
height: 40px;
overflow: scroll;
}
#two
{
position: relative;
top: 100px;
height: 1500px;
}
</style>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
 
<script>
  Benchmark.prototype.setup = function() {
    var one = document.getElementById( 'one' ),
        two = document.getElementById( 'two' ),
        three = document.getElementById( 'three' ),
        $one = $( '#one' ),
        $two = $( '#two' ),
        $three = $( '#three' );
    
    Element.prototype.positionTop = function () { 
            
        return this.offsetTop - this.parentNode.scrollTop;
                
    };
    
  };
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

var top = $one.position().top;
top = $two.position().top;
top = $three.position().top;
 

var top = one.positionTop();
top = two.positionTop();
top = three.positionTop();
 

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments