Smoothscroll not working when importing html from file

Question

I have an issue importing html using jquery. Importing this text will break the smoothscroll plugin

When importing html with jquery:

$(document).ready
    (
        function() 
        {
            $("#about_div").load("test_scroll.html");
        }
    );

I load the following line of html:

<a href="#photography" class="smoothScroll"> Photography</a>

When looking to the source of the page i also see:

<a href="#photography" class="smoothScroll"> Photography</a>

In my menu I have the exact same code (but not imported):

<a href="#photography" class="smoothScroll"> Photography</a>

When I click the link in my menu smoothscroll works, but when I click the imported link I just pointed to page www.peterstreef.nl/scrolltest/#photography which jumps to the section.

If I add smoothscroll links before or after this div the links work fine, so it has nothing to do with include order.

So my question is, how can I import HTML without breaking smoothscroll? I've made a simple test page to reproduce the problem: www.peterstreef.nl/scrolltest/

Answer 1

If you open your smoothscroll.js file, at the end you will see this:

// Initialize all .smoothScroll links
jQuery(function($){ $.localScroll({filter:'.smoothScroll'}); });

This means that, when loaded, the library only initializes existing links and does not take into account the rest of the links loaded afterwards with .load().

The solution for this problem is to initialize the loaded a.smoothScroll again. For that you can change your JS code to this:

$(document).ready(function() {
    $("#about_div").load("test_scroll.html", function() {
       $("#about_div").localScroll({filter:'.smoothScroll'});
    });
});