HTML要素の画面上の座標を取得する

jQueryで選択した要素の画面上の座標を取得したいと思ったが、jQueryが提供しているoffset()関数が返すのはページ上の座標であって、画面に表示されている範囲での座標を返すものが見当たらなかった。 それで、自作した。

$.fn.extend({
  viewportOffset: function(){
    $window = $(window);
    p = this.offset();
    return {left: p.left - $window.scrollLeft(), top: p.top - $window.scrollTop()};
  }
});

使い方

$('.selector').viewportOffset(); // => {left: xxx, top: yyy}

coffeescriptで書いたものを翻訳して動作確認はしていないので間違っているかもしれん。