javascript - 在 JavaScript 中按给定的垂直滚动百分比滚动

Question

我有 X 和 Y 滚动百分比值(值范围从 0 到 100)，并且我想将页面滚动到该位置。我正在从 API 调用接收百分比值。

function scrollPageByGivenPercentage(percentageX, percentageY) {
    // ... scroll by percentage ...
    //window.scrollTo(percentageX, percentageY);
}

上面的函数以像素为单位滚动，但它不起作用。我尝试使用的是:

function scrollPageByGivenPercentage(percentageX, percentageY) {
    var yScrollInPx = document.body.documentElement.clientHeight * percentageY;
    window.scrollTo(0, yScrollInPx);
}

我的猜测是 clientHeight 是错误的属性。也尝试过offsetHeight。

我从这个 question 中计算出百分比:

我有这个函数来接收当前滚动值的百分比:

function getScrollPercent() {
    var h = document.documentElement,
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
    return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
}

Answer 1

获取文档的总高度，计算出所需的 px 百分比，然后将其应用于 window.scrollTo()。试试这个:

var scrollYPercent = 0.25;
var scrollYPx = document.documentElement.scrollHeight * scrollYPercent;
window.scrollTo(0, scrollYPx);

html, body { height: 1000px; }
p { margin-top: 400px; }

<p>Note the scroll position -></p>