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

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

这是一个示例小提琴，显示了此操作的实际情况。

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< /code>，但您可以将其替换为您想要的任何内容。

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