Cacher is the code snippet organizer for pro developers

// link to tab
<a class="open-specific-tab" href="#tabs">Go To Tab</a>

// tabs
<div class="section" id="tabs">
    <nav class="tab-nav">
	    <ul>
	        <li><a href="#tab1">tab 1</a></li>
	        <li><a href="#tab2">tab 2</a></li>
	    </ul>
	</nav>

	<div class="tab-content" id="tab1">
	    <article>
	        content1 goes here
	    </article>
	</div>
	
	<div class="tab-content" id="tab2">
	    <article>
	        content2 goes here
	    </article>
	</div>
</div>

// jquery
$(".tab-content").hide().first().show();
$(".tab-nav li:first").addClass("active");

$(".tab-nav a").on('click', function (e) {
    e.preventDefault();
    $(this).closest('li').addClass("active").siblings().removeClass("active");
    $($(this).attr('href')).show().siblings('.tab-content').hide();
});

$('a.open-specific-tab').on('click', function (e) {
	 e.preventDefault();
	 $('body, html').animate({
			scrollTop: $('#tabs').offset().top - 10
		},800);
	 $('#tabs li:nth-child(2)').addClass("active").siblings().removeClass("active");
	 $('#tab2').show().siblings('.tab-content').hide();
});