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

Question

我正在使用以下 jQuery：

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

目前这将向下滚动页面，当视口顶部到达元素时它将停止，但是我希望视口滚动直到视口底部与我定位的元素内联。

到目前为止，我已经尝试从上到下更改，但没有奏效，任何帮助将不胜感激。

Answer 1

这个想法是滚动直到元素出现在页面底部。

从顶部的滚动位置 = 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);

});

Answer 2

请试试这个：

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

Answer 3

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