如果你看到这个小提琴演示，http://jsfiddle.net/Zj2Vq/1/它正在运作，但我真正想要的是它滚动到完全相同的位置（在“一个”标签中），就像我最后一次离开它一样（所以黄色/点击的线不一定是第一行）。相反，它滚动到点击的行，但我想在显示活动/点击的行之前有更多的上下文。
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 ...
});
这有可能吗？
答案 0 :(得分：0)
我通过使用jquery-cookie插件自行解决了这个问题 - 现在它返回到我最后留下的完全相同的垂直位置。
当点击列表中的一行（在标签1中）时，我将位置保存到cookie，一旦点击标签1，它将从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插件（？）： - /