jQuery script doesn't work on WordPress

Question

I am trying to get this scroll to top script working in WordPress but it doesn't do the scrolling. I get the error:

Uncaught TypeError: Cannot read property 'backToTopLink' of undefined(…)

It works with the jQuery I get from Google, but not with the default WordPress version of jQuery.

This is the js file:

 (function ($) {
  $.extend({
    backToTopLink: function (options) {

        //default settings
        var settings = $.extend({
            navigatorZIndex         : '999999',             //Z-index of the navigator
            navigatorBorderRadius   : '20%',                //border radius of the navigator, set 100% if you want to make a circle navigator
            navigatorBgcolor        : '#000',               //navigator background color
            navigatorBgcolorHover   : '#000',               //navigator background color (when hovering, by default same color)
            navigatorOpacity        : 0.6,                  //opacity of the navigator 
            navigatorOpacityHover   : 0.9,                  //opacity of the navigator when hovering
            navigatorWidth          : 30,                   //navigator width size
            navigatorHeight         : 30,                   //navigator height size
            navigatorPadding        : 5,                    //navigator padding size
            navigatorPosition       : 'rb',                 //lb (left bottom) or rb (right bottom),
            navigatorPosPercent     : 3,                    //percentage position
            arrowImgSrc             : '',                   //image source
            arrowColor              : '#fff',               //color of the div arrow
            arrowWidth              : 10,                   //width of the div arrow
            arrowMarginTop          : 8,                    //margin top of the arrow image
            arrowImgMarginTop       : 8,                    //margin top of the arrow image (apply if using image only)
            scrollDelay             : 1000                  //scrolling delay
        }, options);


        //we check if the top navigator link has already been created.
        if ($("#top-navigator").length == 0) {
            $("body").prepend("<div id='top-navigator'><div id='arrow-up'></div></div>");

            //styles for the top-navigator
            $("#top-navigator").css({
                'position'          : 'fixed',
                'text-align'        : 'center',
                'cursor'            : 'pointer',
                'display'           : 'none',
                'z-index'           : settings.navigatorZIndex,
                'border-radius'     : settings.navigatorBorderRadius,
                'background'        : settings.navigatorBgcolor,
                'opacity'           : settings.navigatorOpacity,
                'width'             : settings.navigatorWidth,
                'height'            : settings.navigatorHeight,
                'padding'           : settings.navigatorPadding
            });

            $("#top-navigator").hover(
                function() {
                    $(this).css({
                        'opacity'       : settings.navigatorOpacityHover,
                        'background'    : settings.navigatorBgcolorHover
                    });
                }, function() {
                    $(this).css({
                        'opacity'       : settings.navigatorOpacity,
                        'background'    : settings.navigatorBgcolor
                    });
                }
            );

            switch(settings.navigatorPosition){
                case "lb":
                    //left bottom
                    $("#top-navigator").css({
                        'left'          : settings.navigatorPosPercent + '%',
                        'bottom'        : settings.navigatorPosPercent + '%'
                    });
                    break;
                default:
                    //right bottom
                    $("#top-navigator").css({
                        'right'         : settings.navigatorPosPercent + '%',
                        'bottom'        : settings.navigatorPosPercent + '%'
                    });
                    break;
            }

            if(settings.arrowImgSrc != ""){
                $("#arrow-up").html("<img src='" + settings.arrowImgSrc + "' border='0'/>");
                $("#arrow-up").css("margin-top", settings.arrowImgMarginTop);
            }else{
                var borderProp = settings.arrowWidth + 'px solid transparent';
                var borderBotProp = settings.arrowWidth + 'px solid ' + settings.arrowColor;
                $("#arrow-up").css({
                    'width'         :'0',
                    'height'        :'0',
                    'border-left'   :borderProp,
                    'border-right'  :borderProp,
                    'border-bottom' :borderBotProp,
                    'font-size'     :'0',
                    'line-height'   :'0',
                    'margin'        :'0 auto',
                    'display'       :'inline-block',
                    'margin-top'    : settings.arrowMarginTop
                });
            }

            $(window).scroll(function () {
                    if ($(this).scrollTop()) {
                        $('#top-navigator:hidden').stop(true, true).fadeIn();
                    } else {
                        $('#top-navigator').stop(true, true).fadeOut();
                    }
            });

            $("#top-navigator").click(function () {
                //reset the value
                $(this).css({
                    'opacity'       : settings.navigatorOpacity,
                    'background'    : settings.navigatorBgcolor
                });
                $('html, body').animate({ scrollTop: $('html').offset().top }, settings.scrollDelay);
            });
        }
    }

  });
})(jQuery);

In functions.php, I register the JS file like this:

function scroll_to_top() {
    wp_enqueue_script( 'scrolltotop', get_template_directory_uri() . '/js/jquery.backtotoplink.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'scroll_to_top' );

and on the page, just before the </body> tag I added:

 <script>
    $.backToTopLink({});
 </script>

It has probably something to do with how to declare the $, but I don't know how to do this.

Answer 1

Initialize the Scroll to Top script from within another JavaScript file. I'm assuming that jquery.backtotoplink.js is coming from a third party and that it should not be modified.

For example, in a theme, the JavaScript could be enqueued like this:

function wpse247853_scripts() {
    // jquery.backtotoplink.js depends on jquery
    wp_enqueue_script( 'scrolltotop', get_template_directory_uri() .
       '/js/jquery.backtotoplink.js', array( 'jquery' ), false, true );

    // Enqueue a general purpose JS file here. It will initialize the scroll
    // to top script. It depends on jquery and scrolltotop.
    wp_enqueue_script( 'wpse-theme-js', get_template_directory_uri() .
       '/js/wpse-theme.js', array( 'jquery', 'scrolltotop' ), false, true );
}
add_action( 'wp_enqueue_scripts', 'wpse247853_scripts' );

Initialize the scroll to top script here:

/js/wpse-theme.js

( function( $ ){
    // Initialize the scroll to top plugin
    $.backToTopLink( {} );

    // ...Do some other jQuery stuff.
})( jQuery );

The code that was previously used to intialize the scroll to top script should be removed:

<script>
   $.backToTopLink({});
</script>

Here's a demo of the script in action: