我找到了jQuery Next / Prev Vertical Smooth Scrolling here的完美示例,它为我工作(我在WordPress上有网站)。 Jsfiddle但我对JS并不熟悉,需要帮助菜单项。在这段代码中,我只有两个项目:next和previous。如何在此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());
}
});
})();
你的帮助会非常受欢迎!
答案 0 :(得分:0)
您的#next
和#prev
个链接呼叫scrollTo(element)
。您仍然可以使用该功能,您只需根据新菜单的外观更改识别要滚动的元素的方式。
您会注意到我已将current
类的setter移动到scrollTo
函数。如果您愿意,您当然可以在菜单监听器中保留它......