jQuery Next/Prev 平滑滚动菜单

Question

我找到了 jQuery Next/Prev Vertical Smooth Scrolling here 的完美示例，它对我有用（我在 WordPress 上有网站）。 Jsfiddle 但我对 JS 不太熟悉，需要菜单项方面的帮助。在这段代码中，我只有两个项目：下一个和上一个。如何在此 JQ 代码中向我的菜单项添加其他额外项目。我可以在 enloop.com/features 等一个地方修复我的菜单吗 Working example

<div id="home-block">
    <div class="current">Content Goes here</div>
    <div>A box of content</div>
    <div>Content</div>
    <div>More content...</div>
</div>

<div id="nav-right">
    <a href="#" id="prev">Previous</a>
    <a href="#" id="next">Next</a>
</div>

#home-block div{
width: 300px;
height: 400px;
border: 1px solid #000;
box-shadow: 1px 1px 3px #888;
margin: 10px 10px 10px 15px;
}

.post-contain{
position: relative;
margin: 0 auto;
width: 450px;
border: 1px solid #000;
}

#nav-right{
    position: fixed;
    right: 15px;
    top: 35%;
}

.current {
    color: red;
}

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

您的帮助将不胜感激！

Answer 1

您的#next 和#prev 链接调用scrollTo(element)。您仍然可以使用该功能，您只需根据新菜单的外观更改识别要滚动到的元素的方式。

• Demo using id and href
• Demo using element index

您会注意到我将current 类的setter 移动到scrollTo 函数。如果您愿意，当然可以将其保留在菜单侦听器中...