我正在尝试让网站滚动div。当访问者想要滚动时,它应该自动转到下一个或上一个div。
下面你可以看到我的html是怎样的。
<body>
<header>
</header>
<div id="content">
<div id="contentv1">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv2">
</div>
<div id="contentv3">
</div>
</div>
</body>
我正在尝试使用以下代码:
(function() {
var scrollTo = function(element) {
$('html, body').animate({
scrollTop: element.offset().top
}, 500);
}
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if ($current.index() != $('#content > div').length - 1) {
$current.removeClass('current').next().addClass('current');
scrollTo($current.next());
}
});
$('body').mousewheel(function(event) {
event.preventDefault();
var $current = $('#content > .current');
if (!$current.index() == 0) {
$current.removeClass('current').prev().addClass('current');
scrollTo($current.prev());
}
});
})();
标题高度为10%并粘在顶部。内容div的高度为90%。因此,当滚动时,内容div的顶部应该与标题的底部对齐。
任何人都可以帮我找到正确的方向吗?