我基本上有一个设置尺寸的div和overflow: hidden。该div包含7个子div（但每次只显示一个），我希望在各自的链接悬停时顺利地垂直滚动。jQuery滚动到div上悬停并返回到第一个元素
但是，第一部分（div）没有链接，并且是没有链接悬停时的默认部分。
看看这个的jsfiddle看什么我谈论的基本结构：http://jsfiddle.net/YWnzc/
我试图用jQuery scrollTo做到这一点，但一直没能得到它的工作。
任何帮助将不胜感激。谢谢。
这样的事情？
代码：
jQuery("#nav").delegate("a", "mouseenter mouseleave", function (e) {
var i, self = this,
pos;
if (e.type == "mouseleave") {
i = 0;
}
else {
//Find out the index of the a that was hovered
jQuery("#nav a").each(function (index) {
if (self === this) {
i = index + 1; //the scrollTop is just calculated from this by a multiplier, so increment
return false;
}
});
}
//Find out if the index is a valid number, could be left undefined
if (i >= 0) {
//stop the previous animation, otherwise it will be queued
jQuery("#wrapper").stop().animate({
scrollTop: i * 200
}, 500);
//I would retrieve .offsetTop, but it was reporting false values :/
}
e.preventDefault();
});
绝对完美！谢谢！ – scferg5
仅供参考：您发给我的JSFIDDLE去了MooTools框架，而不是jQuery ... fyi。 （可能是为什么它不工作
复制并准确粘贴代码，它会在jQuery的工作，为动画滚动
尝试本作的DIV内平滑滚动，我测试了它 - ？它的伟大工程你。
$(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('#wrapper');
// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
$('a[href*=#]').each(function() {
// Ensure it's a same-page link
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'')) {
// Ensure target exists
var $target = $(this.hash), target = this.hash;
if (target) {
// Find location of target
var targetOffset = $target.offset().top;
$(this).click(function(event) {
// Prevent jump-down
event.preventDefault();
// Animate to target
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
// Set hash in URL after animation successful
location.hash = target;
});
});
}
}
});
// Use the first element that is "scrollable" (cross-browser fix?)
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
FYI：信用此代码不能去我作为一个个体开发者，虽然我也稍微调整代码这段代码的拥有者和创造者是克里斯Coyier，你可以找到更多关于这个滚动代码这里： http://css-tricks.com/snippets/jquery/smooth-scrolling/
$("#nav a").hover(function() {
var sectionName = $(this).attr("href");
var sectionPos = $(sectionName).offset().top;
var wrapperPos = $("#wrapper").offset().top;
var wrapperScroll = $("#wrapper").scrollTop();
var scrollPos = sectionPos - wrapperPos + wrapperScroll;
$("#wrapper").stop().animate({scrollTop:scrollPos}, 600);
}, function() { $("#wrapper").stop().animate({scrollTop:0}, 600); });
这里有一个工作示例：http://jsfiddle.net/YWnzc/7/
和代码（非常类似于rizzle的，与我会解释一些改动）：
$('a').hover(function(){
var selector = $(this).data('section');
var scrollAmount = $(selector).offset().top + $('#wrapper')[0].scrollTop - 129;
$('#wrapper').animate({scrollTop: scrollAmount}, 250);
},function(){
$('#wrapper').animate({scrollTop: 0}, 250);
});
首先，var selector = $(this).data('section'); bec在jsFiddle中使用，href属性返回页面+散列的完整路径。所以我将其更改为html5数据属性（data-section）。
下一行与rizzle类似，不同之处在于我们抓取该部分的偏移量并将其添加到#wrapper的当前scrollTop值。正如他指出的那样，还有一些奇怪的抵消问题仍在继续，我发现减去129就是个窍门。虽然这个129号码可能看起来像是可能会破坏的东西，但我确实测试过改变这些部分的大小，使它们不相等，并且它继续工作。我使用的是Chrome，也许一个非webkit浏览器需要一个不同的常量来减去。但似乎129号码至少是某种常数。
其余的应该是不言自明的。
有一点要注意：当您移动光标移到<a>标签，该#wrapper div的内容会显得跳来跳去，但是这只是因为悬停事件的鼠标离开部分简要被触发的光标移动。我相信你可以解决这个问题:)
仅仅因为你在ANY.animation（）之前错过了.stop（） - 这实际上解决了你的例子中的问题！ ：http://jsfiddle.net/roXon/YWnzc/10/ –
是的，谢谢:) – maxedison
请注意，大多数Android浏览器和旧iOS不支持滚动DIV的 – rizzle