Gridviewのスクロールバー位置について

Question

GitHubで紹介されているGrid.js(https://github.com/mmurph211/Grid)
を使用し、Gridviewでヘッダー行・列固定の表を作成しています。

再現方法：
表の一番下までスクロールし、
1．現在のスクロール値を INPUT type="hidden" へgetボタンクリックで保存
2．スクロールバーを適当に動かす(一番上まで上げる)
3．ボタン1をクリック
4．またスクロールバーを上に動かし、ボタン2をクリック

コード：

        <script type="text/javascript">
            $(function () {
                $(".get").click(function () {     		//再現方法-1
                    $('.g_Body').attr('id', 'test');       //divにID(test)付与
                    var TOP = $('#test').scrollTop();        //変数TOPに上で定義したdiv(test)のscrollTopを代入
                    document.getElementById('hidScroll').value = TOP;
                });
               
                $(".Button1").click(function () {    		//再現方法-3
                    $('.g_Body').attr('id', 'test');
                    var QWE = document.getElementById('hidScroll').value;
                    document.getElementById('test').scrollTop = QWE;
                });
            });
            window.onload = function () {     		//再現方法-4で通る
            	$('.g_Body').attr('id', 'test');
             	var QWE = document.getElementById('hidScroll').value;
            	if (QWE != "") {
                	document.getElementById('test').scrollTop = QWE;
            	}
            };
        </script>

        <略>
        <input type="button" class="get" value="getボタン" />
        <INPUT id="hidScroll" type="hidden" name="hidScroll" runat="server">
        <input type="button" class="Button1" value="ボタン1" />
        <asp:Button ID="Button2" runat="server" Text="ボタン2" />
        <略>

現象：
ボタン1をクリックでは保存しておいたスクロール値が正しく設定され一番下までスクロールバーが下がりますが、
ボタン2では一番下まで動かず、少し上に上がっています。

やりたいこと：
ボタン2をクリック後、スクロールバーを一番下まで下げたい

やってみたこと：
ブレークポイントを置いて進めたところ、設定後の
document.getElementById('test').scrollTop の値が保存した値(正)と違っていました。
また、ボタン2を何度か押してみたところ、一旦は一番下まで下がりますが、ポストバック後に少し上に上がってしまっているように見えます。

javascriptはまだ不慣れなため不備あるかと思いますが
何かお気づきの点等あれば教えていただけませんでしょうか。
よろしくお願い致します。

開発環境は
.NET Framework4.5/vb.net/VisualStudio2012
です。

Comments

[退会済みユーザー]

コードは ``` と ``` で囲ってください。インデントされて読みやすくなります。それから、.get とか #test とか定義が不明なものが多々あります。そういうものがないようにしていただけませんか。

Answer 1

turbgraphics200様のコメントどおり、GridのonLoadイベントに記述することで思い通りの動作となりました。

new Grid({
    srcType : "json", 
    srcData : "gridData", 
    onLoad: function () {
        $('.g_Body').attr('id', 'test');
        var QWE = document.getElementById('hidScroll').value;
        if (QWE != "") {
            document.getElementById('test').scrollTop = QWE;
        }
    }

Answer 2

document.getElementById('test').scrollTop = 10000000000;
と、適当にでかい数字を設定するのはだめですかねｗ

Comments

[kana_1212]

ありがとうございます！
実はそれも試して見たのですが、scrollTopの値は変わらずで…。
質問文に書いておくべきでした、申し訳ございません。

[turbgraphics200]

ちょっと、本題とは関係ないですが、
$(function() {
});
に囲まれている部分は、onload時に実行されるものですから、わざわざ別途
window.onload = function() {
});
と書かなくてもいいかと思います。

本題に戻り、Gridにデータをセットする際にGridにもonLoadイベントがあるようですので、GridのonLoadイベントでscrollさせてみてははいかがでしょう。
new Grid({
srcType : "json",
srcData : gridData,
onLoad: function() { document.getElementById('test').scrollTo(0, 100000) }
}

[kana_1212]

ご回答ありがとうございます。
そのようなアドバイス非常に助かります。
仰るとおり、GridのonLoadイベントに記述することで思い通りの動作となりました。
ずっと悩んでいましたので大変助かりました、ありがとうございました！