Helpful-Sprungmarke

by Kevin Pliester

HTML

<div class="header">
  <div class="container">
    <ul>
      <li><a href="#">Start</a></li>
      <li><a href="#">Leistungen</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </div>
</div>
<div class="wrapper">
  <div class="container">
    <div class="content">
      <a href="#helpful">Zu Helpful springen</a>
    
    </div>
    <div id="helpful">

      <p>
        Hier ist Helpful.
      </p>
    </div>
    <div class="footer">
      <p>
      Hier ist der Footer.
      </p>
    </div>
  </div>
</div>

CSS

body {
  font-family: arial;
}

.wrapper {
  padding-top: 100px;
}
.content {
  min-height: 100vh;
}

.footer {
  min-height: 250px;
}

#helpful {
  border: 1px solid #ddd;
  padding: 25px;
}

.header {
  border-bottom: 1px solid #ddd;
  padding: 25px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
}

.header ul {
  margin: 0;
  padding: 0;
}

.header ul li {
  display: inline-block;
  margin-right: 25px;
}

.header ul li:last-child {
  margin-right: 0;
}

JavaScript

(function($) {
  $('a[href="#helpful"]').click(function() {
    var offset = -100; // wie viel Platz oberhalb sein soll, also die Höhe der Kopfzeile + 10 oder 20.
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top + offset
        }, 1000); // Die Geschwindigkeit für die Animation. Hier eine Sekunde.
        return false;
      }
    }
  });
})(jQuery);