鼠标滚轮全页滚动

时间:2015-09-03 23:08:40

标签: javascript jquery css

使用鼠标滚轮时,我正在使用整页滚动条。我有它用锚类指向div。代码在正常情况下不起作用,但只有当我第一次点击div的链接,所以我的URL将是http://localhost/#test-anchor,然后重新加载页面将滚动功能工作。这是用于实验的代码。

$(document).ready(function () {
    var divs = $('.anchor');
    var dir = 'up'; // wheel scroll direction
    var div = 0; // current div
    $(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < -10) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible div :
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length) {
            div++;
        }
        //console.log(div, dir, divs.length);
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 100%);
        return false;
    });
    $(window).resize(function () {
        $('html,body').scrollTop(divs.eq(div).offset().top);
    });
});

0 个答案:

没有答案