TEMPLATE2

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
<section class="hero full-height">
    <div class="hero-inner full-height">
        <div class="row"> <span class="hero-title">
					<h1>TEST..</h1>
                 <a class="arrow-down" href="#content"><i class="fi fi-arrow-down"></i></a>
             </span>

        </div>
    </div>
    </div>
</section>
<div id="content">
    <article>
        <p>Here at ZURB, we created these icons with specific standards which gives a cohesive voice and style to develop an amazing font set for everyone to love, enjoy and use on their website. Some standards includes:</p>
    </article>
</div>

CSS

section.hero {
    padding: 20px;
}
section.hero .hero-inner {
    padding: 20px;
    background-color: red;
}
.full-height {
    height: 100%;
    position: relative;
}
/**/
 #content {
    padding: 0 20px 20px;
}
article {
    background-color: #efefef;
    padding: 20px;
    min-height:1000px;
}
.hero h1 {
    color: #fff;
    font-size: 3em;
}
section.hero a.arrow-down i {
    font-size: 3em;
    color: #fff;
}
@media only screen and (max-width : 40em) {
    section.hero, section.hero .hero-inner {
        padding: 10px;
    }
    #content {
        padding: 0 10px 10px;
    }
}

JavaScript

$('.arrow-down').click(function (e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: ($("#content").offset().top - 20)
    }, 800, 'swing');
});