當從另一個標籤頁更改時，jQuery應該返回到標籤中完全相同的垂直位置

Question

如果你看到這個小提琴演示，它正在工作，但我真正想要的是它滾動到完全相同的位置（在標籤「一「），因爲我最後一次離開它（所以黃色/點擊線不一定是第一行）。相反，它是滾動到點擊線，但我希望有更多的上下文之前顯示主動/點擊線。

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

..這個代碼（我剛添加的餅乾部分 - 並沒有改變/刪除任何東西）：

$(".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); 
    } 
}); 

我不能讓小提琴演示，包括jQuery的cookie的插件（？）： -/