jQuery position().top vs custom positionTop

Benchmark created by ThinkingStiff on November 26, 2011

Preparation HTML

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

Setup

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

Test runner

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

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

Revisions

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

• Revision 1: published by ThinkingStiff on November 26, 2011
• Revision 2: published on October 24, 2012