JavaScript scroll to anchor

Question

Having some problems with JavaScript / jQuery.

We're currently using a "shortcode" from Visual Composer (WordPress plugin) that creates (horizontal) tabs. We'we made some custom changes, but only visually (images/css).

We're trying to make it so that when you click on a tab you automatically scroll down to the content.

I've tried wrapping the script in

jQuery(document).ready( function({});
jQuery(window).ready( function({});

and also tried replacing .ready() with .load()

jQuery(".pws_tabs_controlls_item").children().click(function(){
    jQuery('html, body').animate({
         scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
    }, 700, 'swing', function () {});
});

However! If you copy the entire script and paste it in the Console in Chrome/Firefox it will work as intended, based on that I'd say that the script it self works, it feels like it's not loading or registering or w/e.

Is there any (obvious) problem/mistake we've made?

I'd be happy to provide additional information if neccessary (e.g. the website address)

Any help would be greatly appreciated!

Answer 1

The VisualComposer plugin renders only after the document is ready, and that's why it's not working.

The best way to solve your problem is by using jQuery's event delegation, e.g:

jQuery(document).on('click', '.pws_tabs_controlls_item > a', function() {
    jQuery('html, body').animate({
         scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
    }, 700, 'swing', function () {});
});

---

UPDATE

After your comment, I can see that the anchor tags inside your .pws_tabs_controlls_item elements already have a click event listener, and it also uses event.stopPropagation(), so my code above will never be executed.

The other way to solve your problem, is by dirty-checking when the element is available, e.g:

function waitForAvailability(selector, callback) {
  if (jQuery('selector').length === 0) {
    callback();
  }
  else {
    setTimeout(function() {
      waitForAvailability(selector, callback);
    }, 0);
  }
}

And then, you can use the code you were already using, something like that:

waitForAvailability('.pws_tabs_controlls_item', function() {
  jQuery(".pws_tabs_controlls_item").children().click(function(){
    jQuery('html, body').animate({
      scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
    }, 700, 'swing', function () {});
  });
});