Question

如何创建两个按钮（“next”和“prev”），将浏览器滚动到文章标题？

<div id="cycle-posts">
    <a id="next" href="#next"></a>
    <a id="prev" href="#prev"></a>
</div>

<article>My first post</article>
<article>My second post</article>
<article>My third post</article>
<article>My fourth post</article>

如果它是相关的：在前几个之后，我的文章使用“无限滚动”加载。

这是我到目前为止所得到的，但它甚至不是很接近：

$('#cycle-posts a').bind('click', function (e) {
    $articles = $('article');
    e.preventDefault();
    var totalArticles = $articles.length;


    if ($(this).attr("id") == "next") {
        new_index = ++current_index;
    } else if ($(this).attr("id") == "prev") {
        new_index = --current_index;
    }

    if (new_index > totalArticles) {
        new_index = 0;
    }   

    $articles.removeClass('current').eq(new_index).addClass('current');

    console.log(new_index+' / '+totalArticles);

    // now scroll offset, find offset based on .current?

});

Answer 1

在处理程序上，我们将current类移除到它实际拥有它的元素，然后我们选择下一个（或前一个）元素，然后我们将current类添加到它（仅当它是不是第一个或最后一个元素。）

然后我们滚动到该元素，动画scrollTop，如here所述。

(function() {
    var scrollTo = function(element) {
        $('html, body').animate({
            scrollTop: element.offset().top
        }, 500);
    }
    $('#next').click(function(event) {
        event.preventDefault();
        var $current = $('#container > .current');
        if ($current.index() != $('#container > div').length - 1) {
            $current.removeClass('current').next().addClass('current');
            scrollTo($current.next());
        }
    });
    $('#prev').click(function(event) {
        event.preventDefault();
        var $current = $('#container > .current');
        if (!$current.index() == 0) {
            $current.removeClass('current').prev().addClass('current');
            scrollTo($current.prev());
        }
    });
})();

You have a fiddle here

Answer 2

我没有尝试计算每次单击的当前索引，而是发现使用函数生成前向和后向点击处理程序更好，这些处理程序也将索引存储为本地。这样两者都可以引用索引，而不必动态计算。

尝试以下

(function() { 
  var index = 0;
  $('article:first').addClass('current');
  var moveOne = function (forward) {
    var articles = $('article');
    articles.eq(index).removeClass('current');
    if (forward) {
      index++;
      if (index === articles.length) {
        index = 0;
      }
    } else { 
      index--;
      if (index < 0) {
        index = articles.length - 1;
      }
    }
    articles.eq(index).addClass('current');
  }

  $('#next').click(function () { moveOne(true); });
  $('#prev').click(function () { moveOne(false); });

})();

小提琴：http://jsfiddle.net/5f74F/

动画滚动到下一个/上一篇文章

2 个答案: