How are these websites full-screened in the browser with a learn more button at the bottom (moves you into automatically down the page) [closed]


Tags: jquery,html,css,slidedown

Problem :

Websites like Heroku.com and dropbox.com display a front homepage that is full-screened automatically to your browser size, they have a button at the bottom that will automatically move you down the page to learn more about the site. How are they doing this? Can someone help me with a simple code setup?

I've made an outline here http://jsfiddle.net/WwHP6/ but I can't figure out how to do the full-screening and learn more link

HTML

<div class="page1">
    <nav class="navigation">
        <ul>
            <li>Home</li>
            <li>Support</li>
            <li>Sign Up</li>
            <li>Contact</li>
        </ul>
    </nav>
</div>

<div class="page1-content centered">
        <h1> Generic Header</h1>
        <h2> Generic Content 1</h2>
        <h2> Generic Content 2</h2>
        <h2> Generic Content 3</h2>    
</div>    

<div class="learn-more centered">
    <a href="#learn"> learn more </a>
</div>


<div class="page2-content">
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>

CSS

body {
    background: blue;
    color: white;
}

.centered {
    margin: 0px auto;
    position: relative;
    vertical-align: middle;
    text-align: center; 
}
nav {
  list-style: none;

}

.navigation ul li { 
    list-style: none;
    float:left;
    margin: 5px;
}

.page1-content {
    clear:both;
}

.learn-more a {
    color:red;
}

.page2-content {
    margin: 200px 0 auto;
    background-color: white;
    color: black;
    background-size: 100% 1000px;
}


Solution :

Check jQuery.ScrollTo, I think that is what you are looking for.

Also I've created Demo Fiddle how you can implement this. Hope it will help you.

Here's a script.

$(document).ready(function (){
            $("#click").click(function (){
                //$(this).animate(function(){
                    $('html, body').animate({
                        scrollTop: $("#text").offset().top
                    }, 2000);
                //});
            });
        });

    CSS Howto..

    How to debug HTML/CSS for iPhone/iPad performance?

    How do I create a margins on Google maps? [closed]

    How to adjust progress bar with Jquery?

    How can i make each div look like seperate block?

    How can you prevent Formsauthentication to block css and images?

    How to refer to css file in codeigniter?

    With html tables, using CSS, how do I get the tables next to each other?

    How to keep an element :active even after clicking

    How to specify height using fancybox 2.1.4

    How to make resizable li elements with CSS only

    How to vertically center div in floated div?

    HTTPS and how to reference files and images

    How to use body horizontal scrollbar in free jqgrid

    How can I define styles for individual cells in a SharePoint 2007 topnav?

    How do you create a perfectly scalable button in HTML/CSS3/jQuery/Javascript using images to provide borders and corners?

    How do I make my elements occupy the width of their “max-width” specification?

    Ionic on Codepen: how to start a new pen and get Ionic support

    how to combine the css selector using “:not”

    How to separate html header and content with css and make the content scrollable

    How to style an embedded jsp inside another jsp?

    How to make div elements inside a div background image responsive using css

    How can i dynamically change title of input type file?

    how to download google fonts in version bold

    How to prevent css keyframe animation on page load?

    how can resize the page? [closed]

    How to make a automatic image slider.?

    how to detect a url path with jquery and change css

    How do I selectively stack columns with twitter bootstrap

    CSS: How to shadow a field like this? [closed]

    How do I make an image only overflow (hidden) on the bottom if it exceeds it's container div?