Question

I am using the following code to follow named anchors in jquery-ui-tabs. I have it so when the link is clicked it is supposed to take me to the appropriate tab and scroll to the id. The linking works (after much ado), however the scroll is only working if I put a breakpoint on the animate line.

jQuery(document).ready(function($) {
    $('a[goto]').click(function(evt) {
        evt.preventDefault();
        var whereTo = $(this).attr('goto');
        $tabs = $("ul.ui-tabs-nav li");
        $tabs.find('a[href=#' + whereTo + ']').trigger('click')
        $('html,body').animate({
            scrollTop:$(this.hash).offset().top},
            500);
        });
    }); 
});

I tried making it part of a callback, but still no luck.

 $('a[goto]').click(function(evt) {
     evt.preventDefault();
     var whereTo = $(this).attr('goto');
     $tabs = $("ul.ui-tabs-nav li");
     $tabs.find('a[href=#' + whereTo + ']').trigger('click', function(){
         $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
     });
 });

What am I doing wrong?

Answer 1

trigger method doesn’t accept a callback function, it triggers the event so that event handler is executed, you have the value using goto attributes, what you are trying to do finally gives you the value of this variable, actually that part is redundant. Simply use whereTo variable.

jQuery(document).ready(function ($) {
  var $tabs = $("ul.ui-tabs-nav li");
  $('a[goto]').click(function (evt) {
    evt.preventDefault();
    var whereTo = $(this).attr('goto');
    var hash = this.hash;
    // 1
    $tabs.find('a[href=#' + whereTo + ']').trigger('click');
    setTimeout(function(){
       $('html,body').animate({
          scrollTop: $(hash).offset().top
       }, 500);
    }, 500)
    // 2
    // $tabs.find('a[href=#' + whereTo + ']').trigger('click')
    // $('#'+ whereTo).closest('.ui-tabs-panel').promise().done(function(){
    //     $('html,body').animate({
    //        scrollTop: $('#' + whereTo).offset().top
    //     }, 500);
    // })
  });
});

Note that goto is not valid attribute, if you are using HTML5 consider using data-* attributes.