将视口底部滚动到元素底部

Scroll bottom of viewport to bottom of element

本文关键字：底部 元素 滚动 视口      更新时间：2023-09-26

我正在使用以下jQuery：

$(".car-hub-header-help").click(function() {
    $('html, body').animate({
        scrollTop: $(".footer").offset().top
    }, 2000);
});

此时，它将向下滚动页面，当视口的顶部到达元素时，它将停止，但我希望视口滚动，直到视口的底部与我要定位的元素对齐。

到目前为止，我已经尝试过从上到下的改变，但没有成功，任何帮助都将不胜感激。

document.getElementById("div1").scrollIntoView(false);

我们的想法是滚动，直到元素出现在页面底部。

从顶部开始的滚动位置=offset position of the element from the top - current window height + height of element

代码看起来像

$(".car-hub-header-help").click(function() {
    var elTopOffset = $(".footer").offset().top;
    var elHeight = $(".footer").height();
    var windowHeight = $(window).height();
    $('html, body').animate({
        scrollTop: elTopOffset - windowHeight + elHeight
    }, 2000);
});

请尝试以下操作：

$(".car-hub-header-help").click(function() {
     $('html, body').animate({
       scrollTop: $(".footer").offset().top - $(".footer").height() + $(window).height()
     }, 2000);
   });
相关文章：