Offset href = id

Question

When I click on <a class="Navigation" id="WorldHeader" href="#WorldTitle">Go to World</a>, my window put directly the div with the id directly on top. Is there a way to offset the window position when I click on the tag? My header is hiding the content, but I want to keep it.

Answer 1

Solution

Assuming based on the JQuery tag that, and using the reference of @WebMarie, the following solution must help you:

$('#WorldHeader').on('click', function(event) {
  event.preventDefault(); // Prevent the default <a> action.

  let myOffset = 50; // Pixels.
  let newScrollPosition = $("#WorldTitle").offset().top - myOffset;

  $('html, body').scrollTop(newScrollPosition); // Set the current vertical position of the scroll bar.
});

With animation:

$('#WorldHeader').on('click', function(event) {
  event.preventDefault();

  let myOffset = 50; // Pixels.
  let animationDuration = 1000; // Miliseconds.
  let newScrollPosition = $("#WorldTitle").offset().top - myOffset;

  $('html, body').animate({
    scrollTop: newScrollPosition // Set the current vertical position of the scroll bar.
  }, animationDuration);
});

---

Example of use

$('#WorldHeader').on('click', function(event) {
  event.preventDefault();

  let myOffset = 50; // Pixels.
  let animationDuration = 1000; // Miliseconds.
  let newScrollPosition = $("#WorldTitle").offset().top - myOffset;

  $('html, body').animate({
    scrollTop: newScrollPosition // Set the current vertical position of the scroll bar.
  }, animationDuration);
});

#WorldTitle {
  margin: 20px 0;
  width: 100%;
  height: 150px;
  background-color: red;
}

.blue {
  width: 100%;
  height: 500px;
  background-color: blue;
}

.green {
  width: 100%;
  height: 500px;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="Navigation" id="WorldHeader" href="#WorldTitle">Go to World</a>
<div class="blue"></div>
<div id="WorldTitle"></div>
<div class="green"></div>