问Jquery平滑滚动-只有在单击链接时滚动条位于顶部时，才能正常工作

EN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
    if (this.hash !== '') {
        e.preventDefault();
        const hash = this.hash;

        $('html, body, .main')
            .animate({
                scrollTop: $(hash).offset().top
            }, 800);
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="margin-left: 30%; margin-right: 30%">
  <main>
    <a href="#contactme"><div class="contactme-button">Contact me</div></a>
  
    <div class="section-1" style="width: 100%; height: 1000px; background-color: grey; display: block;"> </div>
  
    <a href="#contactme"><div class="contactme-button-2">Contact me</div></a>
  
    <div class="section-1" style="width: 100%; height: 1000px; background-color: blue; display: block;"> </div>
  
    <div class="contactme-section" id="contactme" style="width: 100%; height: 100px; background-color: grey;">CONTACT ME</div>
    <div class="section-1" style="width: 100%; height: 1000px; background-color: black; display: block;"> </div>
  </main>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $('a').on('click', function(e) {
        if (this.hash !== '') {
            e.preventDefault();
            const hash = this.hash;

            $('html, body, .main').animate({
                scrollTop: $(hash).offset().top
            }, 800);


        }
    });
</script>
</html>

.main{
overflow-x: hidden;
}