Question

I am trying to create a modular html document that employs smooth scrolling.

If I don’t place the anchors directly in the document it does not scroll smoothly.

http://www.cincitucky.com/ is the site.

http://www.cincitucky.com/_scripts/script.js shows the loaded html elements with “nav.html” deprecated because I had to place it directly in index.html for it to work properly.

Is it possible to have the javascript properly execute smooth scrolling with the anchors in nav.html?

I checked in thoroughly before asking up here. I wish,someone could help me in this regard.

Also, is there a great site that explains how to ameliorate/solve this?

Answer 1

since you load the nav element via (asynchronous) ajax call, your links are not available at document ready event, so in your external script.js change this

$('a[href^="#"]').click(function(event) {
...

into this

$('body').on('click', 'a[href^="#"]', function(event) {
...

doing so you will capture the event on body element through its propagation (this technique is called event delegation)