Bootstrap4中如何动态添加空白使指定元素点击后位于视口顶部

实现方案 #

你可以通过动态计算所需空白高度的方式适配任意视口尺寸，无需写死CSS固定值，修改步骤如下：

1. 调整CSS样式

去掉原有固定margin配置，改为可动态赋值高度的容器：

.space{
  display: none;
}

2. 修改JS逻辑

点击按钮时实时计算需要的空白高度，再触发滚动：

scrollingElement = (document.scrollingElement || document.body);

function scrollSmoothToBottom () {
  $(scrollingElement).animate({
     scrollTop: document.body.scrollHeight
  }, 500);
}
window.onload = function(){
  const $whiteSpace = $("#whiteSpace");
  const $targetImg = $("#collegeImage");
  document.getElementById("submitButton").addEventListener("click",function(){
    // 先隐藏空白元素，获取无空白状态下的页面真实高度
    $whiteSpace.hide();
    // 获取目标图片距离文档顶部的绝对偏移量
    const imgOffsetTop = $targetImg.offset().top;
    // 计算所需空白高度：视口高度 + 图片顶部偏移 - 无空白时的页面总高度
    // 原理：滚动到底部时scrollTop = 总页面高度 - 视口高度 = 图片顶部偏移，刚好让图片对齐视口顶部
    const needSpaceHeight = window.innerHeight + imgOffsetTop - document.body.scrollHeight;
    // 高度取非负值避免异常
    const finalHeight = Math.max(needSpaceHeight, 0);
    // 给空白元素赋值高度并显示
    $whiteSpace.css('height', finalHeight + 'px').show();
    // 执行滚动
    scrollSmoothToBottom();
  });
}

3. 简化HTML空白元素

移除无用的visibility属性即可：

<div id="whiteSpace" class="space"></div>

该方案会自动适配不同尺寸的视口，无论桌面端还是移动端都可以保证滚动到底部时目标图片刚好对齐视口顶部。

内容的提问来源于stack exchange，提问作者KhushThakor