0

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.

  • 1
    Not tested, one issue I see is that the call to wp_enqueue_script() should have jquery specified as a dependency, e.g. wp_enqueue_script( 'scrolltotop', get_template_directory_uri() . '/js/jquery.backtotoplink.js', array( 'jquery' ), '1.0.0', true ); – Dave Romsey Nov 30 '16 at 3:36
  • I changed to your version, but still no scroll, or even an arrow at the bottom of the page. – WendiT Nov 30 '16 at 3:54
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:

demo

  • I tried and it didn't work. I'm going to use a default WP theme now to rule out any script conflicts. Getting the error: wpse-theme.js:3 Uncaught TypeError: $.backToTopLink is not a function(…) – WendiT Nov 30 '16 at 22:54
  • We're going to have to better than it doesn't work. :-) As you can see from my glorious gif, this setup is working for me, so that's reassuring. Using Developer Tools in Chrome or your preferred browser... Have you cleared browser's cache? Are there any errors in the console? If so, what are they? Is jquery.backtotoplink.js being loaded? (Check the Network > JS panel in Developer Tools) Is wpse-theme.js being loaded? (Again, check the Network > JS panel) – Dave Romsey Nov 30 '16 at 23:05
  • I was able to reproduce the issue by breaking the dependency parameters in the wp_enqueue_script() calls within wpse247853_scripts(). Everything works when I use what's in the answer. – Dave Romsey Nov 30 '16 at 23:23
  • I added to my comment: wpse-theme.js:3 Uncaught TypeError: $.backToTopLink is not a function(…) so it's more than just it doesn't work ;-). It's the only error message I get. The arrow doesn't show up and it's not scrolling. I have tried it with the twentyfifteen theme without any plugins and I still can't get it to work. I get this error Uncaught TypeError: $.backToTopLink is not a function(…). All the code appear in the right order in the source and points to the right files. It's a mystery to me... – WendiT Dec 1 '16 at 0:54
  • Btw I don't know if it matters, but I'm using XAMPP – WendiT Dec 1 '16 at 0:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.