Stopping scroll animation, once position is reached

When the below is executed the page scrolls to the desired location, however I am unable to scroll up.

function(scope, $elm) {
        var toElement = scope.toElement();
        var fromElement = scope.fromElement();
        $elm.on('change', function() {
            $(toElement).animate({
                scrollTop: $(toElement).offset().top,
            }, 1250);
        });
    }

After completing some research into this issue I believe that this issue is caused as a result of the animation queue (Please correct me if I am wrong). In my attempt to resolve this issue and after searching here on Stack Overflow people who have had the same problem have used the .stop() or .clearQueue method as shown in the snippet below. Unfornately in my case this does not resolve the issue.

function(scope, $elm) {
        var toElement = scope.toElement();
        var fromElement = scope.fromElement();
        $elm.on('change', function() {
            $(toElement).stop().animate({
                scrollTop: $(toElement).offset().top,
            }, 1250);
        });
    }