滾動使用百分率（％）

我只是寫了這個滾動這是工作的罰款網頁和做什麼它應該..滾動使用百分率（％）

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

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

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

..但我想的偏移量由％計頂部.offset（）而不是PX

即而不是

top - 200

它可能是

top - 30%

任何想法如何做到這一點？

與往常一樣，任何幫助表示感謝，並提前致謝。

快速編輯：

當前3回答（謝謝）似乎這不是我想要的，每次倍增，我希望每次都那麼30％的窗口高度的間隙不變每次將＃id內容滾動到頂部的行，並使用固定的定位側邊欄。

我目前的代碼留下了200px的空白，但是會導致不同的顯示器/瀏覽器大小的問題，因爲％會將其排除。

來源

2011-07-18 Dizzi

不確定你想要的30％，但你可以做的只是將你想要的百分比乘以0.3，然後從頂部減去。

如果它是頂偏本身你要的30％：

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

當然，這似乎有點傻，因爲它只是相當於$('#'+ sid +'-content').offset().top * 0.7，但是你可以用任何你想要取代它。

來源

2011-07-18 17:13:53 fletom

是它的頂部偏移我想要的，因爲我的編碼站在它的卷軸從頂部到ID留下200px的差距。我只是測試了你的代碼，它有點像我想要的，但是它每次都乘法，即鏈接1 = 30％，鏈接2 = 60％，鏈接3 = 90％等等，我希望它從頂部到ID之間的差距總是30％ – Dizzi

試試這個

$('#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; 
});

來源

2011-07-18 17:13:56 ShankarSangoli

這基本上和每次乘法的代數碼相同（參見上面的註釋） – Dizzi

可能我們都幾乎同時發佈了答案。 – ShankarSangoli

是的，不是說你重寫他的代碼只是它做了同樣的事情，我不希望它每次都乘以:) – Dizzi

你可以計算偏移量的30％，使用：

$('#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; 
});

下面是一個example fiddle顯示在行動這一點。

來源

2011-07-18 17:14:49

由於某種原因，這dosent爲我工作。 – Dizzi

它沒有工作，因爲我有一個額外的關閉'}）;'出於某種原因！我現在修好了。 –

修正了這個問題，但所有三個答案似乎每次都會增加，我只想要從頂部的css equivilent持續30％的差距：position：absolute; top：30％; – Dizzi

下面將從頂部位置的框總是60％：

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);

來源

2011-07-18 18:07:07

我知道這是歲，OP最有可能由現在找到了解決辦法，但這裏是我的人簡單的解決方案誰碰到這個無論如何..

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

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

來源

2018-01-10 16:14:19 jsw1995

歡迎，並感謝您的貢獻。這是一個很好的解決方案，但它與至少一個其他答案几乎相同（並且與其他幾個答案類似）。當你有更多的聲譽時，你可以評論並建議編輯其他職位。 –

滾動使用百分率（％）

回答

相關問題