How to scroll down and display section on the same page?

I'm developing a one-page website, when user clicks a particular button it should be scrolled down to the another section on the page.

Since i'm using sticky header, the heading on the section gets hidden behind the banner. so i used this below code to display the section when button got clicked.

But this displays the section on the middle. I want the heading should be on top. please help me solve this problem.

scrolled down and displaying in the middle issue

<a onclick="scrollToBottom();" id= "button" class="btn ss-btn" data-animation="fadeInUp" data-delay=".8s">Read More</a>
     <script type="text/javascript">
        function scrollToBottom(){
          var element = document.getElementById("readmore");
               window.scrollTo(0,element.offsetHeight);
               }
      </script>