我是jquery的新手，我正在努力解决以下问题：
从研究中我得出了一个快速的jsfiddle。它还没有完成，我想要实现的目标是：
当我将鼠标移到'DIV 1'时，我希望'Link30'到顶部（并且'鼠标输出时'Link30'保持在顶部）。
然后我希望'Link50'在鼠标悬停'DIV 2'时返回顶部（并且'Link50'在鼠标输出时保持在顶部）。
我想鼠标悬停div几次，并且每次都有相关链接到滚动div的顶部。
当你鼠标悬停'DIV 1'并且'Link30'到达顶部然后当你鼠标悬停'DIV 2'时它停留在'Link30'而不是像我想的那样移动到'Link50'。
希望这是有道理的。感谢。
以下是我的代码示例，但您最好看到 jsfiddle 。
$( "div.overout1" )
.mouseover(function() {
$( this ).find( "span" ).text( "mouse over " );
$('a').filter(function(index) { return $(this).text() === 'Link30'; }).addClass('on');
var offset = $('.on').offset().top - $('.links').scrollTop();
if(offset > window.innerHeight)
{
$('.links').scrollTop(offset);
}
})
.mouseout(function() {
$( this ).find( "span" ).text( "mouse out " );
$('a').filter(function(index) { return $(this).text() === 'Link30'; }).removeClass('on');
});
$( "div.overout2" )
.mouseover(function() {
$( this ).find( "span" ).text( "mouse over " );
$('a').filter(function(index) { return $(this).text() === 'Link50'; }).addClass('on');
var offset = $('.on').offset().top - $('.links').scrollTop();
if(offset > window.innerHeight)
{
$('.links').scrollTop(offset);
}
})
.mouseout(function() {
$( this ).find( "span" ).text( "mouse out " );
$('a').filter(function(index) { return $(this).text() === 'Link50'; }).removeClass('on');
});
答案 0 :(得分：1)
如果你将一个类用于你想要滚动的位置以及一些标志，例如开/关，那就更好了。
<强>演示 https://jsfiddle.net/jc8aqz65/
<强>脚本
var tclass;
var cla = 0;
var clab = 0;
var topa = $('.30').position().top - 10;
var topb = $('.50').position().top - 10;
$(".overout1, .overout2").mouseover(function () {
tclass = $(this).attr("class")
$(this).find("span").text("mouse over ");
if (cla == 0 && tclass == "overout1") {
$('.links').animate({
scrollTop: topa
}, 500);
cla = 1;
} else if (clab == 0 && tclass == "overout2") {
$('.links').animate({
scrollTop: topb
}, 500);
clab = 1;
}
}).mouseout(function () {
$(this).find("span").text("mouse out ");
if (tclass == "overout1") {
clab = 0;
} else {
cla = 0;
}
});
答案 1 :(得分：1)
这是一个稍微优化的版本：
https://jsfiddle.net/fkhbcxzw/15/
linkScroll($('div.overout1'), 'Link30');
linkScroll($('div.overout2'), 'Link50');
function linkScroll(item, identify) {
var object;
item
.on('mouseenter touchstart', function() {
object = $(this).find('span');
object.text('mouseenter-touchstart');
$('a').removeClass('on').filter(function() {return $(this).text() === identify}).addClass('on');
var offset = $('.on').position().top;
var current = $('.links').scrollTop();
$('.links').scrollTop(current+offset);
})
.mouseleave(function() {
object.text('mouseleave');
});
}
因为输入每个div只需要一个动作，所以最好使用mouseenter，它只会触发父节点。只要您在徘徊，mouseover事件就会不必要地触发。还添加了一些移动支持。
答案 2 :(得分：1)
根据您的要求，您可以创建一个函数，您可以重复使用传递不同的参数（$ elem作为div来应用悬停效果，例如链接号）：
让我们调用函数 hoverLink 。
您可以通过多种方式实现这一目标，但可以快速修改代码......
**
$('document').ready(function() {
var hoverLink = function($elem, link) {
$elem.hover(function() {
var offset = $('.links').position().top;
$('a').removeClass('on');
$('a').filter(function(index) {
return $(this).text() === 'Link' + link;
}).addClass('on');
offset = $('.on').position().top;
$('.links').scrollTop(offset);
});
};
var div = $('.overout1');
var div2 = $('.overout2');
var div3 = $('.overout3');
hoverLink(div, 10);
hoverLink(div2, 25);
hoverLink(div3, 50);
});html,body{height:100%;}
.overout1,.overout2,.overout3 {
width: 100px;
height:100px;
margin:10px;
float: left;
color:white;
font-weight:bold;
font-family:helvetica;
padding:5px;
position:relative;
z-index:2;
}
.overout1 {
background-color: green;
}
.overout2 {
background-color: blue;
}
.overout3 {
background-color: red;
}
.links{
width: 40%;
height: 100px;
background-color: orange;
float: left;
color:white;
font-weight:bold;
font-family:helvetica;
overflow:auto;
position:relative;
}
p,span {
line-height: 1em;
margin: 0;
padding: 0;
position:relative;
z-index:1;
}
.on {color:red}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<div class="overout1">
<p>DIV 1</p>
<span>move your mouse</span>
</div>
<div class="overout2">
<p>DIV 2</p>
<span>move your mouse</span>
</div>
<div class="overout3">
<p>DIV 3</p>
<span>move your mouse</span>
</div>
<div class="links">
<a href="#">Link1</a><br />
<a href="#">Link2</a><br />
<a href="#">Link3</a><br />
<a href="#">Link4</a><br />
<a href="#">Link5</a><br />
<a href="#">Link6</a><br />
<a href="#">Link7</a><br />
<a href="#">Link8</a><br />
<a href="#">Link9</a><br />
<a href="#">Link10</a><br />
<a href="#">Link11</a><br />
<a href="#">Link12</a><br />
<a href="#">Link13</a><br />
<a href="#">Link14</a><br />
<a href="#">Link15</a><br />
<a href="#">Link16</a><br />
<a href="#">Link17</a><br />
<a href="#">Link18</a><br />
<a href="#">Link19</a><br />
<a href="#">Link20</a><br />
<a href="#">Link21</a><br />
<a href="#">Link22</a><br />
<a href="#">Link23</a><br />
<a href="#">Link24</a><br />
<a href="#">Link25</a><br />
<a href="#">Link26</a><br />
<a href="#">Link27</a><br />
<a href="#">Link28</a><br />
<a href="#">Link29</a><br />
<a href="#">Link30</a><br />
<a href="#">Link31</a><br />
<a href="#">Link32</a><br />
<a href="#">Link33</a><br />
<a href="#">Link34</a><br />
<a href="#">Link35</a><br />
<a href="#">Link36</a><br />
<a href="#">Link37</a><br />
<a href="#">Link38</a><br />
<a href="#">Link39</a><br />
<a href="#">Link40</a><br />
<a href="#">Link41</a><br />
<a href="#">Link42</a><br />
<a href="#">Link43</a><br />
<a href="#">Link44</a><br />
<a href="#">Link45</a><br />
<a href="#">Link46</a><br />
<a href="#">Link47</a><br />
<a href="#">Link48</a><br />
<a href="#">Link49</a><br />
<a href="#">Link50</a><br />
<a href="#">Link51</a><br />
<a href="#">Link52</a><br />
<a href="#">Link53</a><br />
<a href="#">Link54</a><br />
<a href="#">Link55</a><br />
<a href="#">Link56</a><br />
<a href="#">Link57</a><br />
<a href="#">Link58</a><br />
<a href="#">Link59</a><br />
<a href="#">Link60</a><br />
</div>
</body>
</html>