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

Since I'm using sticky header, the heading on the section gets hidden behind the banner, so I used the code below to display the section when the button gets 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

My code:

<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>

CodePudding user response：

I think the CSS property scroll-padding-top is your answer.

CodePudding user response：

You have different options to solve this

The first approach is to use only HTML to scroll to the element with an specific id

html{height:3000px;scroll-behavior: smooth;}
#readmore{position:absolute; top:2000px;}

<a href="#readmore">Scroll down</a>
<h1 id="readmore">
Read More
</h1>

The second approach is to use scrollIntoView method, which scrolls the specified element into the visible area of the browser window.

const element = document.getElementById("readmore");

document.getElementById('btn').addEventListener('click', () => {
  element.scrollIntoView();
})

html{height:3000px;scroll-behavior: smooth;}
#readmore{position:absolute; top:2000px;}

<button id="btn">Scroll down</button>
<h1 id="readmore">
Read More
</h1>

The third approach is to hard code the specific location where I would like to scroll, in this case I set it to 2000px (height)

const element = document.getElementById("readmore");

document.getElementById('btn').addEventListener('click', () => {
    window.scrollTo(0, 2000);
})

html{height:3000px;scroll-behavior: smooth;}
#readmore{position:absolute; top:2000px;}

<button id="btn">Scroll down</button>
<h1 id="readmore">
Read More
</h1>