Question

我刚刚编写了这个用于滚动页面，这些页面工作正常并且做了它应该做的事情。

$('#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的差距，但这导致了不同的监视器/浏览器大小的问题，而％会将其排序。

Answer 1

以下内容将该框始终从顶部开始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);

Answer 2

您可以计算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，显示了这一点。

Answer 3

我知道这已经有好几年了，OP现在很可能找到了一个解决方案，但对于遇到这种情况的人来说，这是我的简单解决方案..

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

Answer 4

不确定你想要的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，但你可以用你想要的任何东西替换它。

Answer 5

试试这个

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

使用百分比％滚动到顶部.offset（）

5 个答案: