jQuery UI Tabs - Anchor to Internal Links

I'm having trouble using jQuery UI (v1.11+) Tabs with internal anchor links. My code is as follows:

Javascript:

$(document).ready(function () {
 $("#tabs").tabs();

});

HTML:

<div id="tabs">
                <ul class="tabs-list">
                  <li> <a href="#tabs-1">
                    <div class="tab"> Tab 1 </div>
                    </a> </li>
                  <li> <a href="#tabs-2">
                    <div class="tab"> Tab 2 </div>
                    </a> </li>
                </ul>

                <div id="tabs-1">
                  <div><a href="#">Text for tab 1</a></div>
                  </div>
                </div>
                <div id="tabs-2">
                 <a href="#"> Text for Tab 2</a>
                </div>
</div>

I am having trouble trying to link to these tabs from text links that are at a different area of the page. The objective is to smoothly scroll after clicking each text link to the designated tab:

<a href="#tabs-1">Link to Tab 1</a>
<a href="#tabs-2">Link to Tab 2</a>

I've tried various searches here, including using the beforeActivate function (since all "select" examples are outdated with newer jQuery UI versions), but nothing works for me. Can someone please assist? The jQuery UI docs do not show examples of this.

use below code . check DEMO .

use active option of tab to make selected from external resources. check more HERE

use beforeActivate event Triggered immediately before a tab is activate . check HERE

HTML

 <div id="tabs">
            <ul class="tabs-list">
              <li> <a href="#tabs-1">
                <div class="tab"> Tab 1 </div>
                </a> </li>
              <li> <a href="#tabs-2">
                <div class="tab"> Tab 2 </div>
                </a> </li>
            </ul>

            <div id="tabs-1">
              <div><a href="#">Text for tab 1</a></div>
              </div>


              <div id="tabs-2">
             <a href="#"> Text for Tab 2</a>
            </div>
 </div>
<a href="#tabs-1" class="external-tab">Link to Tab 1</a>
<a href="#tabs-2" class="external-tab">Link to Tab 2</a>

JQUERY

var tab ;
$("#tabs").tabs({
  beforeActivate :  function( event, ui ) {
    $("html, body").animate({ scrollTop: $("#tabs").offset().top }, 1000);
  } 
});

$('.external-tab').click(function (event) {
  event.preventDefault();
   tab = $(this).attr('href');
   var index = $('div[id^=tabs-]').index($(tab));
  $('#tabs').tabs( "option", "active", index );
});