滚动事件上的Js滚动到下一个/上一个div

时间:2015-01-22 16:27:59

标签: javascript html scrollto onscroll

我正在尝试让网站滚动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的顶部应该与标题的底部对齐。

任何人都可以帮我找到正确的方向吗?

0 个答案:

没有答案