jquery - 从另一个选项卡更改时，jQuery 应该返回到选项卡中完全相同的垂直位置

Question

如果您看到这个 Fiddle 演示，http://jsfiddle.net/Zj2Vq/1/它正在工作，但我真正想要的是它滚动到与我离开时完全相同的位置（在选项卡“one”中）最后一次（所以黄色/点击的线不一定是第一行）。相反，它正在滚动到单击的行，但在显示活动/单击的行之前我想要更多的上下文。

HTML：

<div id="tabsMain">

<!-- The menu line of the three tabs -->
<ul>
    <li id="tab_one">
        <a href="#one">one</a>
    </li>
    <li>
        <a href="#two">two</a>
    </li>
    <li>
        <a href="#three">three</a>
    </li>
</ul>

<!-- Tab "one" -->
<div id='one'>
    <table>
        <tr><td><div data-id='1000' class='edit'>Line 1</div></td></tr>
        <tr><td><div data-id='1001' class='edit'>Line 2</div></td></tr>
        <tr><td><div data-id='1002' class='edit'>Line 3</div></td></tr>
        <tr><td><div data-id='1003' class='edit'>Line 4</div></td></tr>
        <tr><td><div data-id='1004' class='edit'>Line 5</div></td></tr>
        <tr><td><div data-id='1005' class='edit'>Line 6</div></td></tr>
        <tr><td><div data-id='1006' class='edit'>Line 7</div></td></tr>
        <tr><td><div data-id='1007' class='edit'>Line 8</div></td></tr>
        <tr><td><div data-id='1008' class='edit'>Line 9</div></td></tr>
        <tr><td><div data-id='1009' class='edit'>Line 10</div></td></tr>
        <tr><td><div data-id='1120' class='edit'>Line 11</div></td></tr>
        <tr><td><div data-id='1121' class='edit'>Line 12</div></td></tr>
        <tr><td><div data-id='1122' class='edit'>Line 13</div></td></tr>
        <tr><td><div data-id='1123' class='edit'>Line 14</div></td></tr>
        <tr><td><div data-id='2001' class='edit'>Line 15</div></td></tr>
        <tr><td><div data-id='2003' class='edit'>Line 16</div></td></tr>
        <tr><td><div data-id='3000' class='edit'>Line 17</div></td></tr>
        <tr><td><div data-id='3001' class='edit'>Line 18</div></td></tr>
        <tr><td><div data-id='3002' class='edit'>Line 19</div></td></tr>
        <tr><td><div data-id='3003' class='edit'>Line 20</div></td></tr>
        <tr><td><div data-id='3004' class='edit'>Line 21</div></td></tr>
        <tr><td><div data-id='3005' class='edit'>Line 22</div></td></tr>
        <tr><td><div data-id='3006' class='edit'>Line 23</div></td></tr>
        <tr><td><div data-id='3007' class='edit'>Line 24</div></td></tr>
        <tr><td><div data-id='3008' class='edit'>Line 25</div></td></tr>
        <tr><td><div data-id='3009' class='edit'>Line 26</div></td></tr>
        <tr><td><div data-id='4120' class='edit'>Line 27</div></td></tr>
        <tr><td><div data-id='4121' class='edit'>Line 28</div></td></tr>
        <tr><td><div data-id='4122' class='edit'>Line 29</div></td></tr>
        <tr><td><div data-id='4123' class='edit'>Line 30</div></td></tr>
        <tr><td><div data-id='5001' class='edit'>Line 31</div></td></tr>
        <tr><td><div data-id='5003' class='edit'>Line 32</div></td></tr>
    </table>
</div>

<!-- Two -->
<div id='two'>
    Tab two will do some stuff ...
</div>

<!-- Three -->
<div id='three'>
    Tab three will do some other stuff ...
</div>

</div>

jQuery：

$(function () {

$("#tabsMain").tabs({
    // Populate a variable with the current/active tab
    activate: function (event, ui) {
        oldTabIndex = ui.oldTab.index();
    }
});
});


// --------------------------------------------------------------------
// Return to same vertical position when clicking the view tab
// but only if we come from the 2nd tab

$("#tab_one").click(function (event) {
if (oldTabIndex == 1) {
    if ($("#selectedRow").length > 0) {
        $('html, body').animate({
            scrollTop: $("#selectedRow").offset().top
        }, 500);
    }
}
});

// --------------------------------------------------------------------
// Highlight current row and set selection color and ID attribute

var bgcolor;
var yellow = "rgb(255, 255, 0)";

$("table tr").hover(

function () { // hover-in
  bgcolor = $(this).css("background-color");
  if (bgcolor != yellow) {
    $(this).css("background-color", "khaki");
  }
},
function () { // hover-out
  bgcolor = $(this).css("background-color");
  if (bgcolor === yellow) {
    $(this).css("background-color", "yellow");
  } else {
    $(this).css("background-color", "");
  }
});

$("table tr").click(function () {
$("table tr").each(function () {
    $(this).css("background-color", "");
    $(this).removeAttr('id');
});
$(this).css("background-color", "yellow");
$(this).attr('id', 'selectedRow');
});


// --------------------------------------------------------------------
// Clicks on the "edit" class

$(".edit").click(function (e) {

e.preventDefault(); // prevent the window/page to jump to the top

// Change focus to tab "two" (0-based index so this is the 2nd tab)
$("#tabsMain").tabs("option", "active", 1);

// Get the ID we need to edit
var id = $(this).closest('div').data('id');

// some Ajax stuff ...
});

这有可能吗？

Answer 1

我通过使用jquery-cookie插件自己修复了这个问题 - 现在它返回到与我上次离开时​​完全相同的垂直位置。

单击列表中的一行时（在选项卡一中），我将位置保存到 cookie 中，一旦单击选项卡一，它将从 cookie 中获取旧位置并向下滚动到它。

我替换了这段代码：

$(".edit").click(function (e) {

e.preventDefault(); // prevent the window/page to jump to the top

// Change focus to tab "two" (0-based index so this is the 2nd tab)
$("#tabsMain").tabs("option", "active", 1);

.. 使用此代码（我只是添加了 cookie 部分 - 没有更改/删除任何内容）：

$(".edit").click(function (e) {

e.preventDefault(); // prevent the window/page to jump to the top

// Set a cookie named "scrollPos" which lives for 7 days
var scrollPos = $(window).scrollTop();
$.cookie("scrollPos", scrollPos, {
  path: '/',
  expires: 7
});

// Change focus to tab "two" (0-based index so this is the 2nd tab)
$("#tabsMain").tabs("option", "active", 1);

请注意，“e.preventDefault()”也可以删除——我发现它在这里没有任何好处。

我也替换了这个：

$("#tab_one").click(function (event) {
    if (oldTabIndex == 1) {
        if ($("#selectedRow").length > 0) {
            $('html, body').animate({
                scrollTop: $("#selectedRow").offset().top
            }, 500);
        }
    }
});

.. 有了这个：

$("#tab_one").click(function (event) {
    if (oldTabIndex == 1) {
        var scrollPos = $.cookie("scrollPos"); // get the "scrollPos" cookie
        $('html, body').animate({
            scrollTop: scrollPos
        }, 500);
    }
});

我无法让 Fiddle 演示包含 jquery-cookie 插件（？）：-/