jQuery在hover时滚动到div并返回第一个元素
我基本上有一个设置维度和overflow: hidden的div overflow: hidden 。 该div包含7个子div（但一次只显示一个），当我们各自的链接hover时，我希望能够平滑地滚动它们。
但是，第一部分（div）没有链接，并且是没有链接hover时的默认部分。
看看这个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(); });
仅供参考：您发送给我的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 0) { return el; } else { $scrollElement.scrollTop(1); var isScrollable = $scrollElement.scrollTop()> 0; $scrollElement.scrollTop(0); if (isScrollable) { return el; } } } return []; } });
仅供参考：虽然我稍微调整了代码，但是这个代码的功劳并没有作为个人开发人员使用。 此代码的所有者和创建者是Chris Coyier，您可以在此处找到有关此滚动代码的更多信息： http ： //css-tricks.com/snippets/jquery/smooth-scrolling/
这是一个有效的例子： 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'); 因为在jsFiddle中，href属性返回页面的完整路径+哈希。 所以我将其更改为html5数据属性（ data-section ）。
下一行类似于rizzle，除了我们获取该部分的偏移量并将其添加到#wrapper的当前scrollTop值。 正如他所指出的那样，仍有一些奇怪的偏移问题，我发现减去129就可以了。 虽然这个129号似乎可能会破坏，但我确实测试了改变各个部分的大小，使它们不相等等等，并且它继续工作。 我正在使用Chrome，也许非webkit浏览器需要一个不同的常量来减去。 但似乎129号码至少是某种常数。
其余的应该是不言自明的。
有一点需要注意：当你将光标移到标签上时， #wrapper div的内容似乎会跳转，但这只是因为当光标移动时，hover事件的mouseleave部分会短暂触发。 我相信你可以解决那个:)
$("#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); });