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

您可以使用 CSS % 宽度和高度设置html, body,table

然后正如@PalashMondal 指出的那样setscrollTop和/元素scrollLefthtmlbody

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

scrollTop并scrollLeft设置滚动条位置。您#curr没有滚动条，因此您可以滚动正文：

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

工作小提琴

于 2013-05-10T18:58:43.993 回答
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 回答