使用百分比%滚动到顶部.offset()

Diz*_*zzi 5 jquery scroll offset

我只是为滚动页面写了这个,它工作得很好,并做它应该做的事情..

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

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

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

..但我希望偏移量按%而不是px计算

即而不是

top - 200 
Run Code Online (Sandbox Code Playgroud)

它可能是

top - 30%
Run Code Online (Sandbox Code Playgroud)

任何想法如何实现这一目标?

一如既往地提供任何帮助,并提前感谢.

快速编辑:

当前3个答案(谢谢)似乎每次都不会增加,这不是我想要的,我希望每次都有30%窗口高度的恒定间隙,所以每次#id-content都滚动到顶部线条时我有一个固定的侧边栏.

我当前的代码留下了200px的差距,但这导致了不同的监视器/浏览器大小的问题,其中%将对其进行排序.

Mar*_*mić 6

以下将从顶部将盒子定位为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);
Run Code Online (Sandbox Code Playgroud)


fle*_*tom 0

不确定你到底想要什么 30%,但你能做的就是将你想要的百分比乘以 0.3,然后从顶部减去它。

如果它是顶部偏移本身,您需要 30%:

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

当然,这看起来有点愚蠢,因为它相当于$('#'+ sid +'-content').offset().top * 0.7,但您可以将其替换为您想要的任何内容。