scrollTop - CJ's blog

single page layout sample using scrollTop

by CJ Ramki

HTML

<div id="header">
    <nav id="navigation">
        <ul>
            <li><a class="jumper" href="#section1">section1</a>

            </li>
            <li><a class="jumper" href="#section2">section2</a>

            </li>
            <li><a class="jumper" href="#section3">section3</a>

            </li>
        </ul>
    </nav>
</div>
<div id="body"></div>
<div class="link" id="section1">This is section 1 page. here you can place your section 1 contents</div>
<div class="link" id="section2">This is section 2 page. here you can place your section 2 contents</div>
<div class="link" id="section3">This is section 3 page. here you can place your section 3 contents</div>

CSS

#header {
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height:15%;
    background-color: azure;
    z-index:500;
}
#section1 {
    top:15%;
    background-color:blue;
}
#section2 {
    top:65%;
    background-color:red;
}
#section3 {
    top:115%;
    background-color:green;
}
body {
    background-color:pink;
}
.link {
    position:relative;
    left:10%;
    display:list-item;
    width:80%;
    min-height:500px;
    height:auto;
    list-style-type: none;
}
ul li {
    position: relative;
    display: inline;
    margin: 0 10px 0 0;
}
.jumper {
    background: #0f84e8;
    /* Show a solid color for older browsers */
    color: #eee;
    padding: 0 20px 0 20px;
    text-decoration: none;
}
.jumper:hover, #navigation a:focus {
    background: #efefef;
    color: #373737;
}
#navigation {
    margin-left:20%;
}

JavaScript

var from = $("#header").height();
$(document).ready(function () {
    $(".link:first").css("top", from + 'px');
});
$(".jumper").on("click", function (e) {
    e.preventDefault();
    $("body, html").animate({
        scrollTop: $($(this).attr('href')).offset().top - from
    });
});