$(document).ready() 上的 Jquery .scrollTop() 和 .scrollLeft() 不起作用答案

【问题标题】：Jquery .scrollTop() and .scrollLeft() on $(document).ready() not working$(document).ready() 上的 Jquery .scrollTop() 和 .scrollLeft() 不起作用
【发布时间】：2013-05-10 18:49:42
【问题描述】：

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

此代码不起作用。我做错了什么？

非常感谢。

【问题讨论】：

首先，heigth 在$('body') 行中应该是height。
这不是问题。但我改变了它。谢谢

标签： jquery window scrolltop ready

【解决方案1】：

考虑一下jsfiddle

您可以设置html、body、table 与 CSS % 宽度和高度

然后正如@PalashMondal 指出的那样，在html/body 元素上设置scrollTop 和scrollLeft

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

【讨论】：

为什么要同时使用html和body？我可以只用身体吗？
body 和 html 用于浏览器兼容性。如果使用现代浏览器，body 可能会很好。

【解决方案2】：

试试这个：

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

而不是使用：

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

【讨论】：

$('#cur').offset() 允许我们检索 cur 元素相对于文档的当前位置。然后我们为 html & body 设置动画以滚动到具有 slow 效果的位置。我希望你明白了@alexela。
在动画中 scrollTop 和 just top 有区别吗？像 .animate({top+100},'slow') ??
scrollTop 用于滚动条的当前垂直位置，而 top 用于元素的顶部位置。

【解决方案3】：

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

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

Working fiddle

【讨论】：