首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jQuery下一个/上一个平滑滚动菜单

jQuery下一个/上一个平滑滚动菜单
EN

Stack Overflow用户
提问于 2013-06-04 14:48:57
回答 1查看 816关注 0票数 0

我已经找到了jQuery Next/Prev垂直平滑滚动here的完美例子,它为我工作(我在WordPress上有网站)。Jsfiddle,但我不太熟悉JS,需要菜单项的帮助。在这段代码中,我只有两项:下一项和上一项。如何在此JQ代码中将其他菜单项添加到我的菜单项。我可以像在enloop.com/features Working example上那样在一个地方修复菜单吗?

代码语言:javascript
代码运行次数:0
运行
复制
<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());
        }
    });
})();

你的帮助将会得到极大的重视!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-06-04 14:52:37

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

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16911445

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档