przewijania do góry .offset() za pomocą procentowego%

Question

Właśnie napisałem to do przewijania stron, które działa dobrze i robi to, co powinien ..

$('#nav a').click(function(){ 

var sid = $(this).attr('id'); 

$('html,body').animate({ 
scrollTop: $('#'+ sid +'-content').offset().top - 200}, 1000); 
    return false; 
}); 

..ale chcę przesunięcie być obliczona przez% a następnie px

czyli raczej następnie

top - 200 

może być

top - 30% 

wszelkie pomysły, jak to osiągnąć?

Jak zawsze, każda pomoc jest doceniana i z góry dziękuję.

szybkiej edycji:

Obecne 3 odpowiedzi (dziękuję) zdają się mnożyć za każdym razem, co nie jest to, co chcę, pragnę mieć stały odstęp 30% wysokości okna za każdym razem tak za każdym razem, gdy # id-content jest przewijane do górnych linii, mam stały umieszczony pasek boczny, który mam.

Mój obecny kod pozostawia lukę 200px, ale to powoduje problem z różnymi rozmiarami monitorów/przeglądarek, w których% to rozwiązałoby.

Answer 1

Nie wiem dokładnie, czego chcesz, 30%, ale możesz tylko pomnożyć, co chcesz, procentowo o 0,3, a następnie odjąć od góry.

Jeśli jest to górna przesunięcie się chcesz 30%:

$('html,body').animate({ 
    scrollTop: $('#'+ sid +'-content').offset().top - $('#'+ sid +'-content').offset().top * 0.3 }, 1000); 
    return false; 
}); 

oczywiście to wydaje się trochę głupio, bo to jest po prostu odpowiednikiem $('#'+ sid +'-content').offset().top * 0.7, ale można zastąpić go co chcesz.

Answer 2

Spróbuj

$('#nav a').click(function(){ 

var sid = $(this).attr('id'); 
var contentTop = $('#'+ sid +'-content').offset().top; 
contentTop = parseInt(contentTop - (contentTop *0.3)); 
$('html,body').animate({ scrollTop: contentTop }, 1000); 
    return false; 
}); 

Answer 3

Można obliczyć 30% offsetu i używać:

$('#nav a').click(function(){ 

    var sid = $(this).attr('id'); 
    var offset = $('#'+ sid +'-content').offset().top; 

    $('html,body').animate({scrollTop: offset - (offset * 0.3)}, 1000); 
    return false; 
}); 

Oto example fiddle pokazując to w działaniu.

Answer 4

Poniższa umieści pudełko zawsze 60% od góry:

var offset = parseInt($('#example').offset().top); 
var bheight = $(window).height(); 
var percent = 0.6; 
var hpercent = bheight * percent; 
$('html,body').animate({scrollTop: offset - hpercent}, 1000); 

Answer 5

wiem, że to wiek i OP najprawdopodobniej znalazł rozwiązanie teraz, ale tutaj jest moje proste rozwiązanie dla każdego, kto natknął się na to i tak ..

var navBarHeight = $('#navBar').height(); 
      $('html, body').animate({ 
       scrollTop: $("#scrollDestination").offset().top-navbarheight 
      }, 1000);