在 JavaScript 中按给定的垂直滚动百分比滚动答案

【问题标题】：Scroll by given vertical scroll percentage in JavaScript在 JavaScript 中按给定的垂直滚动百分比滚动
【发布时间】：2020-02-11 18:27:06
【问题描述】：

我有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;
}

【问题讨论】：

标签： javascript jquery scroll cross-browser

【解决方案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; }

&lt;p&gt;Note the scroll position -&gt;&lt;/p&gt;

【讨论】：

完全忘记了scrollHeight 属性。 :)