CODEWITHSUNDEEP
jquery
Emily Turcato
Emily Turcato

Reputation: 591

jQuery to scroll to bottom of page

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!!

Upvotes: 0

Views: 109

Answers (2)

Canvas
Canvas

Reputation: 5897

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
    });
});

Upvotes: 1

ThetraNetwork
ThetraNetwork

Reputation: 91

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

Upvotes: 0

Related Questions