slimScroll is not defined on Browser Back Button

Question

I have a basic code that uses the jquery.slimscroll, which works perfectly fine on page load. But if I navigate to an inner page and try to go back using the "back" button on browser, I get the following error:

Uncaught TypeError: Object [object Object] has no method 'slimScroll'

I have checked the element's length and confirmed that the object exists. My jQuert is as simple as this:

<script type="text/javascript">
    $("#boxsrchome").slimScroll();
</script>

Note: I tried wrapping the code around $(document).ready() and $(window).load(). And that did not help either.

Answer 1

First, see if jQuery is defined by inputting jQuery in the console. If it is, try this: Try wrapping it in:

(function($) {
    $("#boxsrchome").slimScroll();
})(jQuery);

If it isn't, you have a problem with the way you're including your files. Also, make sure you aren't including slimscroll.js in the wrong place, and make sure you're not redefining the jQuery object by using jQuery.noConflict(); anywhere, although, that shouldn't matter with this method.

Answer 2

Seem like the browser cannot load your slimScroll plugin due to wrong path of your file or wrong file name. Try to use firebug or chrome developer tools to check if your file are loaded properly.

You can also try to use direct link from Github, so your code should look like:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://raw.github.com/rochal/jQuery-slimScroll/master/jquery.slimscroll.min.js"></script>
<script>
    jQuery(document).ready(function($) {
        $("#boxsrchome").slimScroll();
    });
</script>