滚动到手风琴顶部

Question

我有一个手风琴，它在桌面上的手风琴选项卡旁边和移动设备的下方显示内容，对于移动设备，当打开或关闭某个选项卡时，我需要页面滚动到该选项卡的顶部。

我已经多次看到相同的javascript建议，但不确定如何将其实现到我的代码中。 我需要帮助，以在我的代码中找到正确的类名来替换在此使用的类名：https://jsfiddle.net/hjugdwbp/

我的HTML：

<div id="services-container">

<div class="service" id="service-box1">
 <div id="show1" data-href="service1" onclick="changeClass(4); closeDiv(1);">
  <div class="service-image"><img src="img/srv-temp.jpg" alt="" title=""> 
 </div>
 <h4>Title</h4>
 <ul class="srv-problems">
  <li>Problem</li>
  <li>Problem</li>
  <li>Problem</li>
  <li>Problem</li>
 </ul>
 <a class="learn-more">Learn More</a>
 </div>
</div>

<div class="service-content" id="service1">
 <div class="service-intro">
  <h2>Title</h2>
  <p>Text</p>
 </div>
 <div class="tab-content-wrapper">

 <div class="tab">
  <div id="tab1-1">
   <button class="tablinks" id="defaultOpen" onclick="openSubSvc(event, 'srv1-sub1')" >Sub-Service 1</button>
  </div>
  <button class="tablinks" id="tab1-2" onclick="openSubSvc(event, 'srv1-sub2')">Sub-Service 2</button>
  <button class="tablinks" id="tab1-3" onclick="openSubSvc(event, 'srv1-sub3')">Sub-Service 3</button>
 </div>


<div id="srv1-sub1" class="tab-content srv1">
 <div class="srv-prob">
  <h3>Sub-Service 1</h3>
  <p>Text</p>
 </div>
 <div class="srv-img">
  <h3>Images</h3>
 </div>
</div>

<div id="srv1-sub2" class="tab-content srv1">
 <div class="srv-prob">
  <h3>Sub-Service 2</h3>
  <p>Text</p>
 </div>
 <div class="srv-img">
  <h3>Images</h3>
 </div>
</div>

<div id="srv1-sub3" class="tab-content srv1">
 <div class="srv-prob">
  <h3>Sub-Service 3</h3>
  <p>Text</p>
 </div>
 <div class="srv-img">
  <h3>Images</h3>
 </div>
</div>

</div> <!--tab-content-wrapper-->
</div> <!--service1-->

</div> <!--services-container-->

CSS ：（不确定其中有多少相关，我将其中的一些削减）

#services-container {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

ul.srv-problems {
 min-height: 150px;
 padding:0 1em;
 margin-left: 0;
 margin-bottom: 2em;
 list-style-type: none;
 text-align: left;
}

.service-content {
 margin:2em 0!important;
 padding:0!important;
 text-align:left;
}

#service1 {display:none;}

.service-intro {padding:1em;}

.tab-content-wrapper {
 display:flex!important;
 padding:0!important;
 margin:1.5em 0 0!important;
}
.tab-content-wrapper-mobile {display:none!important;}

.tab {
 float: left;
 padding:0 1em 1em!important;
 margin:0!important;
}

.tab button {
 width: 100%;
 padding: 1.2em;
 text-align: left;
 transition: 0.3s;
}

#tab1-1, #tab2-1, #tab3-1, #tab4-1 {width:100%; margin-bottom:.5em;}

.tab-content {
 width:70.8%!important;
 margin-left:0!important;
 margin-bottom:0;
 padding:0!important;
}


.srv-prob, .srv-img {
 display: inline-block;
 margin: .5em 0 .5em 1em!important;
 padding: .5em!important;
 vertical-align: top;
 text-align:left;
}

@media only screen and (max-width: 479px) {
 .tab-content-wrapper {flex-wrap:wrap;}
 .tab {display:contents!important;}
 #service-box1 {order:1;}
 #service1 {order:2;}
 #tab1-1 {order:1;}
 #tab1-2 {order:3;}
 #tab1-3 {order:5;}
 #srv1-sub1 {order:2;}
 #srv1-sub2 {order:4;}
 #srv1-sub3 {order:6;}
}

jQuery和Javascript：

/* Open service and project content */
$('document').ready(function() {
 $('#show1').click( function() {
  var $div = $('#' + $(this).data('href'));
  $('#service1').not($div).hide();
  $div.slideToggle();
 });
}); 


/* Open sub service content when clicking on tabs */
function openSubSvc(evt, subSvcName) {
 var activeClass = evt.target.classList.contains("active")
  if(!activeClass){
   var i, tabcontent, tablinks;
   tabcontent = document.getElementsByClassName(subSvcName.split("-")[0]);
   for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
   }
   tablinks = document.getElementsByClassName("tablinks");
   for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
   }
   document.getElementById(subSvcName).style.display = "block";
   evt.currentTarget.className += " active";
  } else {
   document.getElementById(subSvcName).style.display = "none";
   evt.target.classList.remove("active");
  }
}

到目前为止，这是我在jsfiddle中更改功能的方式：

$('.tablinks').on('shown.bs.collapse', function(e) {
 var $servicecontent = $(this).closest('.service-content');
 $('html,body').animate({
  scrollTop: $servicecontent.offset().top
 }, 500); 
}); 

很抱歉，如果这令人困惑，我对javascript并不是最好的选择，因此需要一些指导。正如我说过的那样，我需要它在移动设备中工作，因此，如果可以使用if语句，则仅将其应用于某些屏幕宽度会有所帮助，但这并不是完全必要的。谢谢！