Question

我在$（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>

此代码无效。我做错了什么？

非常感谢。

Answer 1

考虑这个jsfiddle

您可以使用CSS％宽度和高度设置html，body，table

然后@PalashMondal在scrollTop / scrollLeft元素上指出了html和body的设置

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

Answer 2

试试这个：

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

而不是使用：

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

Answer 3

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

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

Working fiddle

$（document）.ready（）上的Jquery .scrollTop（）和.scrollLeft（）不起作用

3 个答案: