[Nexus]

<header></header>

<form>
  
  <div style="height: 500px"></div>
  
  <input type="text" required/>
  
  <div style="height: 3000px"></div>
  
  <input type="submit"/>
  
</form>

<style>
    body {
      padding-top: 50px;
    }

    header {
      height: 50px; 
      background: red;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0.5
    }
</style>

<script>
    document.querySelector('form [type="submit"]').addEventListener('click', function () {
        const OFFSET_TOP = 25;
        
        const form = this.closest('form');
        const invalidField = [].filter.call(form.querySelectorAll('[required]'), function (field) {
            return !field.value;
        }).shift();

        if (!invalidField) {
            return;
        }

        const headerHeight = document.querySelector('header').offsetHeight;
        
        window.scrollTo(0, invalidField.getBoundingClientRect().top + document.body.scrollTop - headerHeight - OFFSET_TOP);
    });
</script>