我刚刚编写了这个用于滚动页面,这些页面工作正常并且做了它应该做的事情。
$('#nav a').click(function(){
var sid = $(this).attr('id');
$('html,body').animate({
scrollTop: $('#'+ sid +'-content').offset().top - 200}, 1000);
return false;
});
..但我想要通过%而不是px
来计算偏移量即而不是
top - 200
可能是
top - 30%
任何想法如何实现这一目标?
一如往常,任何帮助都会受到赞赏并提前感谢。
快速编辑:
当前3个答案(谢谢)似乎每次都不会增加,这不是我想要的,我希望每次都有30%窗口高度的恒定间隙,所以每次#id-content滚动到顶部我有一个固定的侧边栏。
我当前的代码留下了200px的差距,但这导致了不同的监视器/浏览器大小的问题,而%会将其排序。
答案 0 :(得分: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);
答案 1 :(得分:1)
您可以计算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,显示了这一点。
答案 2 :(得分:1)
我知道这已经有好几年了,OP现在很可能找到了一个解决方案,但对于遇到这种情况的人来说,这是我的简单解决方案..
var navBarHeight = $('#navBar').height();
$('html, body').animate({
scrollTop: $("#scrollDestination").offset().top-navbarheight
}, 1000);
答案 3 :(得分:0)
不确定你想要的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
,但你可以用你想要的任何东西替换它。
答案 4 :(得分:0)
试试这个
$('#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;
});