点击某个元素时自动滚动屏幕位置的js代码（以屏幕高度为单位）

当点击到id="d-more"的div时，像html中的锚点一样，缓慢平滑提前预先设置好的100vh，滑动的速度可以调节

<script>
        document.getElementById('d-more').addEventListener('click', function() {
            const viewportHeight = window.innerHeight;
            const extraHeight = viewportHeight * 0.09; // 屏幕高度的百分比最后会加上这个百分比
            const scrollTarget = viewportHeight + extraHeight; // 110vh
            const scrollDuration = 1000; // Duration in milliseconds

            const start = window.scrollY;
            const startTime = performance.now();

            function animateScroll(currentTime) {
                const elapsed = currentTime - startTime;
                const progress = Math.min(elapsed / scrollDuration, 1);
                const easing = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;
                window.scrollTo(0, start + easing * (scrollTarget - start));
                if (progress < 1) {
                    requestAnimationFrame(animateScroll);
                }
            }

            requestAnimationFrame(animateScroll);
        });
    </script>

在这个示例中，extraHeight 计算了 10vh 的像素值，并将其加到 viewportHeight 上。这样，当你点击 #d-more 时，页面将滚动到视口高度加上额外的 10vh 位置。

如果你希望调整 extraHeight，只需更改 0.1 乘数为其他值，例如 0.2 对应 20vh。