jQuery 使用百分比 % 滚动到顶部 .offset()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6736582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
scroll to top .offset() using percentage %
提问by Dizzi
I just wrote this for scrolling pages which is working fine and does what it should..
我只是为滚动页面写了这个，它工作正常并且做它应该做的..
$('#nav a').click(function(){
var sid = $(this).attr('id');
$('html,body').animate({
scrollTop: $('#'+ sid +'-content').offset().top - 200}, 1000);
return false;
});
..but I want the offset to be calculated by % rather then px
..但我希望偏移量按 % 而不是 px 计算
ie rather then
即而不是
top - 200
it could be
它可能是
top - 30%
any ideas how to accomplish this?
任何想法如何做到这一点？
As always any help is appreciated and thanks in advance.
一如既往地感谢任何帮助并提前致谢。
Quick Edit:
快速编辑：
The current 3 answers (thank you) seem to multiply each time which is not what I want, I wish to have a constant gap of 30% window height each time so each time the #id-content is scrolled to the top lines up with a fixed positioned sidebar I have.
当前的 3 个答案（谢谢）似乎每次都成倍增加，这不是我想要的，我希望每次都有 30% 的窗口高度的恒定间隙，所以每次 #id-content 滚动到顶部时我有一个固定定位的侧边栏。
My current code leaves a 200px gap but that causes an issue with different monitor/browser sizes where as a % would sort it out.
我当前的代码留下了 200px 的差距，但这会导致不同显示器/浏览器大小的问题，其中 % 会对其进行排序。
回答by Marino ?imi?
The following will position the box always 60% from the top:
以下将始终将框放置在距顶部 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);
回答by jsw1995
I know this is years old and the OP has most likely found a solution by now, but here's my simple solution for anyone who comes across this anyway..
我知道这已经有好几年了，OP 现在很可能已经找到了解决方案，但对于任何遇到此问题的人来说，这是我的简单解决方案..
var navBarHeight = $('#navBar').height();
$('html, body').animate({
scrollTop: $("#scrollDestination").offset().top-navbarheight
}, 1000);
回答by James Allardice
You could calculate 30% of the offset and use that:
您可以计算 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;
});
Here's an example fiddleshowing this in action.
这是一个示例小提琴，显示了这一点。
回答by fletom
Not sure exactly what you want 30% of, but what you can do is just multiply what you want a percentage of by 0.3, and then subtract that from top.
不确定你想要的 30% 到底是什么，但你可以做的就是将你想要的百分比乘以 0.3，然后从顶部减去它。
If it's the top offset itself you want 30% of:
如果它是顶部偏移量本身，您需要 30%：
$('html,body').animate({
scrollTop: $('#'+ sid +'-content').offset().top - $('#'+ sid +'-content').offset().top * 0.3 }, 1000);
return false;
});
Of course that seems a bit silly, since it's just equivalent to $('#'+ sid +'-content').offset().top * 0.7, but you can replace it with whatever you want.
当然，这看起来有点傻，因为它只是等价于$('#'+ sid +'-content').offset().top * 0.7，但你可以用你想要的任何东西替换它。
回答by ShankarSangoli
Try this
尝试这个
$('#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;
});
