JQuery Vom oberen Bereich des Browsers zu Offset scrollen?

Question

Ich habe das folgende Scroll-Skript, das um die Seite scrollt, funktioniert genau, wie ich es auch will.

$(function(){ 
    $('a[href*=#]').click(function() { 
    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) { 
       var targetOffset = $target.offset().top; 
       $('html,body').animate({scrollTop: targetOffset}, 1000); 
       return false; 
      } 
     } 
    }); 
}); 

Allerdings muss ich es an die Spitze ignorieren sagen 200px, wie ich einen festen Kopfzeile am oberen Rand der Seite haben, dass die Inhalts blättert zurück.

Das bedeutet, wenn ich nach oben scrollen scrollt den Inhalt zu hinter dem festen Header, so dass ich es nicht sehen kann, so brauche ich es zu scrollen, nur unter der Kopfzeile .. so zu behandeln die Unterseite des Headers als oben des Browsers nehme ich an ....

Kann dies getan werden, da es sehr praktisch wäre?

Vielen Dank für jede Hilfe

Answer 1

wäre so etwas wie diese Arbeit zu tun?

var targetOffset = $target.offset().top - 200; 

Oder greifen Sie die Höhe des Kopfelements für den zusätzlichen Offset.

Answer 2

Sie so etwas wie dies nutzen könnten, wenn die Bedingung auf ur-Code, dass

//check if the absolute position is below header 
if ($('#IdOfTheScrollElement').position().top >= 200){ 
//scroll 
} 
else { 
//do nothing 
} 

Answer 3

Der Code ist in Ordnung, Sie müssen nur die Höhe Ihrer festen Header hier entfernen, zum Beispiel, wenn es 200px ist. es wird perfekt funktionieren.

$('html,body').animate({scrollTop: (targetOffset().top)-200}, 1000); 

Sie können dies auch überprüfen, wenn eine Taste

$(function() { 

$('a[href*=#]:not([href=#])').click(function() { 

    // Check height of the header and padding 
    var header_height = $('.header').outerHeight(); 

es von Ihrem

Offset entfernen geklickt wird

$('html,body').animate({scrollTop: (targetOffset().top) - header_height }, 1000);