滚动到顶部到原始滚动状态

如何解决滚动到顶部到原始滚动状态

我创建了一个带有可滚动菜单栏的 html，包含两个标题，标题 1 和标题 2。

页眉 1 位于页眉 2 的顶部。页眉 1 会随着向下滚动逐渐消失，随着向上滚动逐渐重新出现。当页眉 1 消失时页眉 2 将粘在页面顶部，并在页眉 1 重新出现时返回到原始位置（在页眉 1 下方）。

我创建了一个按钮，可以将页面滚动到顶部。 （不平滑滚动）。该按钮是内部标题 2。 我的目标是在用户单击滚动到顶部按钮和页面返回顶部时同时显示标题 1 和标题 2。

但是，我的问题是，当我在标题 1 消失的状态下单击按钮时，我只能返回顶部，只显示标题 2，而标题 1 保持隐藏状态。我希望同时显示标题 1 和标题 2。

有人可以帮忙吗？谢谢。

我的代码如下，（请忽略警告标志，我是 javascript 新手。这不是导致主题问题的问题。

<script>
  window.console = window.console || function(t) {};
</script>

<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize","*");
  }
</script>

<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script>
window.onscroll = function() {scrollFunction()};
  var a = document.documentElement.scrollTop;
  var down1;
  var changedposition1;
  var c1;
  var e1=0;

function scrollFunction() {
  var b = document.documentElement.scrollTop;
  var down2=true;
  var changedposition2;
  var c2=down2 == b>a;
  var d;
  var e2;

  if (c2!==c1){
  changedposition2=b;
  }else{
  changedposition2=changedposition1;
  }

  d=changedposition2-b;

  e2=e1+d;

  if (e2<-68){
  e2=-68;}
  else if(e2>0){
  e2=0;}

  document.getElementById("top").style.transform = "translateY(" + (e2) + "px)";

  a=b;
  changedposition1=changedposition2;
  c1=c2;
  e1=e2;
}
</script>

<script>
function topFunction() {
  window.scrollTo({top: 0});
}
</script>

<script>
$('#newBnt').on('click',function () {
    topFunction()
});
</script>

.header1{
position:relative;
height:68px;
width:100%;
background-color:black;
}

.header2{
position:relative;
height:68px;
background-color:black;
}

#top{
position:fixed;
top:0;
width:100%;
z-index:20;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="top">
  <div class="header1">
 </div>
 <div class="header2">
          <button id="newBnt">Go to top</button>
    </div>
  </div>
</div>

<div style="padding:15px 15px 2500px;font-size:30px">
  <p><b>s aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</b></p>
  <p>m ipsum dolor dummy text sit amet,con</p>
  <p>m ipsum dolor dummy text sit amet,con</p>
  <p>Lorem ipsum dolor dummy text sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

（我不想平滑滚动到顶部）