4

我正在使用 jQuery 编写文章轮播，以尝试更好地掌握框架。我有一个包含 div，在这个 div 中我有多篇文章。

<div id="container">
    <article>
        <h3>Article Heading</h3>
        <p>Article Content</p>
    </article>
    <article>
    ...
</div>

div 被格式化为特定的宽度和高度，溢出设置为隐藏

我正在尝试对其进行动画处理，因此当用户单击按钮时，它会调用该函数以滚动到下一篇或上一篇文章

var articles = -1;
var currentPosition = -1;
window.onload = function(){
    articles = $("#container>article");
    currentPosition = 0;
}
function scrollNext(){
    $('#container').animate({
        scrollTop: $(articles[currentPosition+1]).offset().top
    }, 750);
    currentPosition++;
}

但是调用scrollNext函数时，会滚动到下一篇文章的段落，或者会乱序滚动。

我想知道这是否是选择器的问题，或者可能是我的页面样式问题，或者这样做的正确方法是什么。 在此处查看完整页面

或者在 jsfiddle 上试试

4

2 回答 2

2

你的利润把你搞砸了。为什么不尝试这样的事情呢？

var box = $("#container"), height = box.height();
currentPosition++;
box.animate({scrollTop: currentPosition*height});
于 2013-05-14T20:47:02.847 回答
1

您正在使用.offset()它为您提供与身体相比的偏移量。

因为你想在里面滚动div#container你需要使用.position()

http://api.jquery.com/position/

并且使用position()要求 div#container在position: relative;您的 css 中。

一旦你在你的 jQuery 中拥有了它，你需要改变你的 scrollTop 动画以包含scrollTop()添加div#container到position()下一篇文章的

像这样：

$('#container').animate({
  scrollTop: $('#container').scrollTop() + $(pdiv).position().top
}, 750);

您可以在更新的 jsfiddle 中看到这一切：

http://jsfiddle.net/9ryjy/1/

于 2013-05-14T20:54:22.723 回答