It appears that you are looking for...
Simply add this code snippet to the end of your $(".tab-header").click() function:
var clickOffset = this.offsetTop;
setTimeout(function(){
// I'm not very familiar with jQuery, so I'm using vanilla JavaScript here.
document.querySelector(".product-tabs-section").scrollTo({
top: clickOffset,
behavior: 'smooth'
});
}, 400);
// The duration of jQuery fadeIn("fast") is 200ms,
// but sometimes it takes longer than that,
// So I added some margin for error.
Result
// Multiple tabs functionality begins //
$(".tab-content").hide();
$(".tab-content:first").show();
$("ul.tabs li").click(function () {
$(".tab-content").hide();
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn("fast");
$("ul.tabs li").removeClass("tab-active");
$(this).addClass("tab-active");
$(".tab-header").removeClass("m_tab_active");
$(".tab-header[rel^='" + activeTab + "']").addClass("m_tab_active");
});
$(".tab-header").click(function (e) {
$(".tab_content").hide();
var m_tab_activeTab = $(this).attr("rel");
$("#" + m_tab_activeTab).slideToggle();
$(".tab-header").removeClass("m_tab_active");
$(this).addClass("m_tab_active");
$("ul.tabs li").toggle("tab-active");
$("ul.tabs li[rel^='" + m_tab_activeTab + "']").addClass("tab-active");
var clickOffset = this.offsetTop;
setTimeout(function () {
// I'm not very familiar with jQuery, so I'm using vanilla JavaScript here.
document.querySelector(".product-tabs-section").scrollTo({
top: clickOffset,
behavior: 'smooth'
});
}, 400);
// The duration of jQuery fadeIn("fast") is 200ms,
// but sometimes it takes longer than that,
// So I added some margin for error.
});
// Multiple tabs functionality ends //
/* Your custom CSS styles go here */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="your-custom-html-id" class="shopify-section">
<div class="your-custom-section">
<p>Your custom content goes here</p>
</div>
</div>