I have a section in my .cshtml and when a button is clicked on that page it scrolls to the 'contact-form' section of the page. And this is exactly I want that.

But the problem is in my MVC application it's going back to the button section where the button was clicked. Initially I should not see any movement when the button is clicked but I check by putting the breakpoint.

function scrollToContactForm(event) {
    event.preventDefault();

    document.getElementById('contact-form').scrollIntoView({
        behavior: 'smooth'
    });
}

There I could see that it's actually going to that section contact-form. But after coming out of this method it goes to the button section again. Why?

<section class="section-contact-form" id="contact-form">
  <div class="contact-form"> 
  </div>        
</section>

Button html

<button onclick="scrollToContactForm(event)" class="banner-btn">Click Me</button>

And one thing I can say is that in my script nothing was written for scrolling back to caller position. And it's not scrolling back to the top, it's scrolling to the exact same position where the button was clicked.

I tried the same code in a plain .html file it worked but when I copied and pasted the same in my .cshtml page it behaves like this.