jQuery to scroll to bottom of page

Question

So, I have two divs that occupies equal amount of height of page (each height=50%).

<div class="first" id="first" style="height:50%;">
    First content
</div>
<div class="second" id="second" style="height:50%; display:none;">
    Second content
</div>

<script>
   jQuery("#first").click(function () {     
    jQuery('#second').show();       
    });
</script>

As you can see, the second part only shows up when the first div is clicked.

How can I make it so that the page (mobile mostly), scrolls down the the bottom of the page?

Thanks!!

Possible duplicate: http://stackoverflow.com/questions/1890995/jquery-scroll-to-bottom-of-page-iframe — Anders, Aug 16 '15 at 23:03
Or this: http://stackoverflow.com/questions/4249353/jquery-scroll-to-bottom-of-the-page — Anders, Aug 16 '15 at 23:04

score 1 · Accepted Answer · answered Aug 17 '15 at 00:11

1

What you need to do is show the div from hiding and then animate the html body to the div's location.

Here is my jsFiddle : https://jsfiddle.net/cxjwh79v/1/

jQuery

$(function () {
    $("#first").on('click', function () {
        $('#second').show();
        $('html, body').animate({
            scrollTop: $("#second").offset().top
        }, 2500); // Change 2500 value to time it takes to scroll
    });
});

answered Aug 17 '15 at 00:11

Canvas

5,779
9
55
98

Thank you. That's what I was looking for. Appreciate it! :) – Emily Turcato Aug 17 '15 at 05:27

score 0 · Answer 2 · answered Aug 16 '15 at 23:14

0

If you want the first div to cover the page, and the to scroll to the second div when clicked, then add in JavaScript the height after the page has loaded

http://codepen.io/anon/pen/ZGNWag

answered Aug 16 '15 at 23:14

ThetraNetwork

91
8

jQuery to scroll to bottom of page

2 Answers2