使用jQuery单击使用标签滚动顺畅

Question

我有垂直标签，效果很好，单击相关标签标题后内容会发生变化。我希望相关内容的窗格能够平滑滚动，而不是仅在单击选项卡标题时显示。

这是我的HTML：

<div class="wpb_wrapper wpb_tour_tabs_wrapper ui-tabs vc_clearfix ui-widget ui-widget-content ui-corner-all">
<ul class="wpb_tabs_nav ui-tabs-nav >
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0">
        <a href="#tab-e9b37ea4-82c3-7" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Employer</a>
    </li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1">
        <a href="#tab-c2c472f3-0bff-0" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Employee</a>
    </li>
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1">
        <a href="#tab-1438983113882-2-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">You</a>
    </li>
</ul>


<div id="tab-e9b37ea4-82c3-7" class="wpb_tab ui-tabs-panel style="display: block;">
<div class="ww-default wpb_row clearfix vc_row-fluid">
    <div class="no-container">
        <div class="vc_col-sm-8 wpb_column column_container  ">
            <div class="wpb_wrapper">

                <div class="wpb_text_column wpb_content_element ">
                    <div class="wpb_wrapper">
                        <p>Benefits to the Employer: Productivity and Performance</p>

                    </div> 
                </div> 
            </div> 
        </div> 

    </div>
</div>

<div id="tab-c2c472f3-0bff-0" class="wpb_tab ui-tabs-panel style="display: none;">Empty tab. Edit page to add content here.</div> 
<div id="tab-1438983113882-2-2" class="wpb_tab ui-tabs-panel style="display: none;">Empty tab. Edit page to add content here.</div>