Slide down and slide up events mixed up in a fast mouse wheel up and down

Question

I'm using jquery slideDown() and slideUp() to show a fixed gototop link when the scroll bar height is more than 200px.

Problem:

Link slide action mixed up in a fast mouse wheel up and down. Because of 0.4 sec running time of slide functions. I tried to define a visible flag and complete functions to prevent mixing. But not successful.

JsFiddle

Scroll down in result block to view the link and try a fast wheel up and down. If the result block has big height on your screen, please decrease the height to see the action.

impress: function () { 
    if ($(window).scrollTop() > this.MIN_SCROLL_HEIGHT 
        && !this.buttonVisibleFlag) 
    { 
        this.button.slideDown(400, function() {
            Blue.buttonVisibleFlag = true;
        });
    }
    else if ($(window).scrollTop() <= this.MIN_SCROLL_HEIGHT 
             && this.buttonVisibleFlag) 
    {
        this.button.slideUp(400, function() {
            Blue.buttonVisibleFlag = false;
        });
    }
}

Any ideas or help would be greatly appreciated.

score 3 · Accepted Answer · edited May 23 '17 at 12:07

I think your best bet would be to perform the sliding actions only after the user has stopped scrolling for a certain (small) period of time. I found this method to detect when the user stops scrolling and implemented in your code, here's the result:

Updated fiddle

var Blue = {
    MIN_SCROLL_HEIGHT: 200,
    button: null,
    buttonVisibleFlag: null,

    init: function () {
        this.button = $(".gototop");
        this.buttonVisibleFlag = false;
        this.setWindowBindings();
    },
    setWindowBindings: function () {
        $(window).scroll(function () {
            //perform actions only after the user stops scrolling
            clearTimeout($.data(this, 'scrollTimer'));
            $.data(this, 'scrollTimer', setTimeout(function () {
                Blue.impress();
            }, 150));
        });
    },
    impress: function () {
        if ($(window).scrollTop() > this.MIN_SCROLL_HEIGHT) {
            this.button.slideDown();
        } else if ($(window).scrollTop() <= this.MIN_SCROLL_HEIGHT) {
            this.button.slideUp();
        }
    }
}

$(document).ready(function () {
    Blue.init();
});

Note: you may want to tweak the timeout interval to suit your needs

Slide down and slide up events mixed up in a fast mouse wheel up and down

1 Answers1