0

$(document).ready() の scrollTop() と scrollLeft() に問題があります。ロード時に中央の正方形に移動したいです。このコードを書きましたが、うまくいきません。

これが私のコードです：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>

        $(document).ready(function () {

            cur_window_height = $(window).height();
            cur_window_width = $(window).width();
            full_width = cur_window_width * 3;
            full_height = cur_window_height * 3;

            $('body').css({ 'width': full_width, 'heigth': full_height });
            $('#view_table').css({ 'width': full_width, 'height': full_height });

            $('#cur').scrollTop(cur_window_height);
            $('#cur').scrollLeft(cur_window_width);

        });

    </script>
    <style>
        #current_active {
            background-color: #CCC;
        }

        #view_table {
            overflow: hidden;
            height: 800px;
        }
    </style>
</head>
<body>
    <table border="1px" id="view_table">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td id="cur">here is center</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</body>
</html>

このコードは機能しません。私は何を間違えましたか？

どうもありがとう。

4

3 に答える 3

2

このjsfiddleを検討してください

html, body,tableを CSS % の幅と高さで設定できます

scrollTop次に、@PalashMondal が setおよび/要素scrollLeftを指摘したようにhtmlbody

|<html> 100% W&H ------------|
|<body> 300% W&H -------------------------------------------------------------|
|<table id="view_table"> 100% W&H---------------------------------------------|
| cell 1/3 W&H               | cell  1/3 W&H          | cell  1/3 W&H         |
|----------------------------|------------------------|-----------------------|
| cell 1/3 W&H               | cell  1/3 W&H          | cell  1/3 W&H         |
|----------------------------|------------------------|-----------------------|
| cell 1/3 W&H               | cell  1/3 W&H          | cell  1/3 W&H         |
|----------------------------|------------------------|-----------------------|

html, body, #view_table {
    overflow:hidden;
    margin:0;
    padding:0;
}
html, #view_table {
    width:100%;
    height:100%;
}
body {
    width:300%;
    height:300%;
}
#view_table td {
    width:33.333%;
    height:33.333%;
}

$(document).ready(function () {
    cur_window_height = $(window).height();
    cur_window_width = $(window).width();

    $('html, body').scrollTop(cur_window_height);
    $('html, body').scrollLeft(cur_window_width);
});
于 2013-05-10T19:14:34.510 に答える
1

これを試して：

$('html, body').animate({
    scrollTop: $('#cur').offset().top,
    scrollLeft: $('#cur').offset().left
}, 'slow');

使用する代わりに:

$('#cur').scrollTop(cur_window_height);
$('#cur').scrollLeft(cur_window_width);
于 2013-05-10T18:57:33.613 に答える
1

scrollTopscrollLeftスクロールバーの位置を設定します。スクロール#currバーがないため、代わりに本文をスクロールできます。

$('body').scrollTop(cur_window_height);
$('body').scrollLeft(cur_window_width);

働くフィドル

于 2013-05-10T18:58:43.993 に答える