CountUp seems to focus/scroll-jack when init()'d

[parkerwebteam]

[x] Bug
[ ] Feature request

CountUp.js version:

Description

I'm initialising the plugin using the standalone jquery file, and getting some funky scrolling issues. Once it starts counting up, scrolling appears to be jacked and it creates a frustrating experience for the user. It seems to scroll to the element until the animation has finished.

Here's the code calling the plugin:

    $waypoint = $('[data-counter-waypoint]');
    $waypoint.waypoint(function(direction) {

        if (direction === "down") {
            $.each($(this.element), function(index, value) {
                $(value).addClass('visible');
                number = $(value).data('number');
                suffix = ($(value).data('suffix').length > 0) ? $(value).data('suffix') : '';

                if (number < 1000000) {
                    number_suffix = '';
                } else if (number < 1000000000) {
                    number_suffix = "M";
                } else {
                    number_suffix = "B";
                }

                $(value).countup({
                    startVal: 0,
                    endVal: $(value).data('counter'),
                    decimals: 0,
                    options: {
                        suffix: number_suffix + suffix,
                        useGrouping: true,
                    }
                });
            });
        }

        this.destroy();

    },
    {
        offset: '40%'
    });

I've tried setting useGrouping to false/true.

[inorganik]

This isn't a CountUp issue - you can look through the code and you won't find any calls to .focus() or window.onscroll because CountUp doesn't do anything with focus or scrolling. In a separate scroll-spy lib I did for AngularJS I integrated CountUp and you can see things can count regardless if they are in view or not - http://inorganik.github.io/angular-scroll-spy/

More than likely it's the waypoint scroll-spy code you've got there. Here's something that doesn't look right in your code - you are looping over this.element inside $waypoint.waypoint(function(direction) {, but then calling this.destroy(). Without seeing the rest of your code it's hard to troubleshoot. Can you recreate the issue in a jsfiddle or codepen?

Going to close this but I'm happy to help you troubleshoot.

[parkerwebteam]

Fair enough, it does appear that $(document).foundation(); is causing this odd behaviour.