0

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?

Manikandan
  • 417
  • 4
  • 8
  • 18
eldereko
  • 5
  • 6

1 Answers1

0

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)

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177