CODEWITHSUNDEEP
javascriptjqueryhtml
Nick Maddren
Nick Maddren

Reputation: 583

Scroll bottom of viewport to bottom of element

I am using the following jQuery:

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

At the moment this will scroll down the page and when the top of the viewport reaches the element it will stop, however I would like the viewport scroll until the bottom of the viewport is inline with the element that I am targeting.

So far I have tried changing top to bottom and that didn't work, any help would be much appreciated.

Upvotes: 2

Views: 2264

Answers (3)

unicorn
unicorn

Reputation: 21

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

Upvotes: 2

Prajeeth Emanuel
Prajeeth Emanuel

Reputation: 687

The idea is to scroll till the element is present at the bottom of the page.

The scroll position from the top = offset position of the element from the top - current window height + height of element

The code will look like

$(".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);

});

Upvotes: 1

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

Try this please:

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

Upvotes: 0

Related Questions