Scroll bottom in click event

Asked

Viewed 2,079 times

3

I need the page to go down to the footer when clicked on a input.

Actually when the user clicks on input and starts typing, the jQuery autocomplete is hidden by the mobile keyboard, so when it is clicked on input and the mobile keyboard appear I need the page to go down to the end, so the input is more visible and you can see the options of the autocomplete.

tried:

$("input").click(function(){
  $("html, body").animate(function(){
    scrollBottom: 1000
  }, 500)
});

but the scrollBottom doesn’t exist if I’m not mistaken...

javascript jquery rolling jquery-animate

1 answer

4


You can do it this way

$("input").click(function(){
    $("html, body").animate({ scrollTop: $(document).height() }, 500);
});

Source: stackoverflow

Behold:

$(function(){
    $("[data-toggle='bottom']").click(function(){
  	$("html, body").animate({ scrollTop: $(document).height() }, "slow");
    });
});
div{
  width:300px;
  height:1000px;
  background:#000;
}
<body>
  <button data-toggle="bottom">Descer</button>
  <div></div>
</body>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

  • Thanks @Leonard, I had seen this answer elsewhere but had not understood the logic, actually I didn’t understand it yet, document is the entire page and height is the size... it takes the document size and? hahaha but blz worked the way I wanted, thank you!

  • 1

    @Exact Brunocabral, it takes the size of the full page, as this exceeds the margin of scroll that the page has, it descends as far as it can, that is, until the end of the page

Browser other questions tagged javascript jquery rolling jquery-animate

You are not signed in. Login or sign up in order to post.