Question

我正在创建导航，但我对Jquery并不擅长。我只需要<a id="prev">和<a id="next">作为链接，将浏览器带到具有相同类但不按顺序排列的上一个和下一个div。一个简单的“假”jquery锚，它使用class而不是id。

有什么想法吗？

<a name="previousDiv" id="prev">Previous</a>
<a name="nextDiv" id="next">Next</a>

<!-- Display #1 -->

<div class="display" id="first">
Content
</div>

<!-- Display #2 -->

<div class="display" >
Content
</div>

<!-- Display #3 -->

<div class="display" >
Content
</div>

这是我的代码，但它不起作用：

$(document).ready(function() {

    function linkManager() {
        var first = $('#first');
        var previous = $('#prev');
        var next = $('#next');
        if (first.prev('.display').length) {
            previous.attr('href', '#goBack');
        } else {
            previous.removeAttr('href');
        }
        if (first.next('.display').length) {
            next.attr('href', '#goForward');
        } else {
            next.removeAttr('href');
        }
    }
    function scroller() {
        var container = $('window');
        var first = $('#first');
        var cScroll = container.scrollTop();
        var paddingCompensation = parseFloat(first.css('paddingTop'));
        var cRelPos = first.position().top - (paddingCompensation * 2);
        container.animate({
            'scrollTop': cScroll + cRelPos
        }, 'slow');
        linkManager();
    }
    function attributeHandler(object, type) {
        if (object.attr('href')) {
            var active = $('#first');
            active.removeAttr('id');
            if (type == 'rew') {
                active.prev('.display').attr('id', 'highlight');
            } else if (type == 'fwd') {
                active.next('.display').attr('id', 'highlight');
            }
            scroller();
        }
    }
    $('#prev').click(function() {
        attributeHandler($(this), 'rew');
    });
    $('#next').click(function() {
        attributeHandler($(this), 'fwd');
    });
    linkManager();
})();

Answer 1

这是最好的服务器端实现的东西。无论如何你应该在那里制作你的分页导航;更容易访问当前页码以决定next / prev应该去哪里等等。

Answer 2

刚在Webdesigners Wall找到答案：

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>

<script type="text/javascript">
$(function() {

    function scroll(direction) {

        var scroll, i,
                positions = [],
                here = $(window).scrollTop(),
                collection = $('.post');

        collection.each(function() {
            positions.push(parseInt($(this).offset()['top'],10));
        });

        for(i = 0; i < positions.length; i++) {
            if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
            if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
        }

        if (scroll) {
            $.scrollTo(scroll, {
                duration: 750       
            });
        }

        return false;
    }

    $("#next,#prev").click(function() {        
        return scroll($(this).attr('id'));        
    });

    $(".scrolltoanchor").click(function() {
        $.scrollTo($($(this).attr("href")), {
            duration: 750
        });
        return false;
    });

});
</script>

锚定到具有相同类的div

2 个答案: