Load_JQuery_And_Execute_Handler_After_Detected

Load_JQuery_And_Execute_Handler_After_Detected.js

(function () {
        if (window.jQuery) {
            console.log('jQuery already loaded');
        } else {
            var s = document.createElement('script');
            s.setAttribute('type', 'text/javascript');
            s.setAttribute('src', 'https://code.jquery.com/jquery.min.js');
            document.body.appendChild(s);
            console.log('jQuery has been attached');
        }

        /*Execute handler after jQuery detected*/
        detectJquery(function ($) {
            var $button = $("<button type='button' style='width: 50px; height: 50px; line-height: 50px; position: fixed; bottom: 10px; right: 10px; vertical-align: middle; background-color: rgba(0, 0, 0, 0.3); color: whitesmoke; text-align: center; cursor: pointer; border: none'>top</button>");
            $button.on('click', function (e) {
                e.preventDefault();
                $('html, body').animate({scrollTop: 0}, 500);
            });
            $button.appendTo(document.body);
        });

        function detectJquery(handler) {
            if (window.jQuery) {
                console.log('jQuery has been detected');
                typeof  handler === 'function' && handler(window.jQuery);
            } else {
                setTimeout(function () {
                    detectJquery(handler);
                }, 500);
            }
        }
    }());