我已经找到了jQuery Next/Prev垂直平滑滚动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());
}
});
})();
你的帮助将会得到极大的重视!
发布于 2013-06-04 14:52:37
您的#next
和#prev
链接调用scrollTo(element)
。您仍然可以使用该功能,您只需根据新菜单的外观更改要滚动到的元素的标识方式。
您会注意到,我将current
类的设置器移到了scrollTo
函数。当然,如果您愿意,您可以将其保留在菜单侦听器中...
https://stackoverflow.com/questions/16911445
复制相似问题