link scrollTop

Links that goes to related inner contents.

by stackmanoz

HTML

<div id="top">
    <div>
        <a href="#one">one</a>
    </div>
    <div>
        <a href="#two">two</a>
    </div>
    <div>
        <a href="#three">three</a>
    </div>
    <div>
        <a href="#four">four</a>
    </div>
    <div>
        <a href="#five">five</a>
    </div>
</div>

<div id="one">
    <h1>Large-scale projects1</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu risus eu quam tristique consequat id in lorem. Duis rutrum posuere tellus, at commodo neque ullamcorper quis. Nunc fringilla dolor at dui tristique blandit. Duis sem massa, sollicitudin quis hendrerit eget, volutpat at est. Curabitur blandit vehicula sem, id bibendum massa facilisis sed. Phasellus cursus sem quis orci varius nec tristique justo gravida. Duis semper suscipit augue non pharetra. Sed vel felis vitae ligula accumsan elementum.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eget rhoncus nulla. Nullam eu risus tellus, eu vulputate massa. Cras lorem sapien, iaculis id aliquam non, porttitor vitae libero. Donec viverra gravida elit eu egestas. Aliquam adipiscing porttitor lacus, at faucibus lorem fringilla eget. Quisque sed rhoncus sem. Pellentesque eu arcu risus. Vestibulum a orci vitae risus tempor ullamcorper nec eu lacus. Nullam adipiscing, lectus in malesuada molestie, nulla purus accumsan risus, ac ultricies metus sapien vitae lacus. Ut tristique, lectus nec egestas pretium, ante mi venenatis augue, a malesuada nunc enim non metus. Donec non tincidunt turpis. Duis est enim, facilisis eget dignissim ut, dapibus sit amet nisi. Phasellus risus arcu, lacinia sed consectetur vitae, suscipit pellentesque lacus.

Cras id justo et purus rutrum auctor vel sed felis. Cras tempus enim ut est egestas non blandit lacus luctus. In est dolor, accumsan suscipit pulvinar at, euismod nec mauris. Suspendisse a mi viverra orci imperdiet dictum a nec odio. Fusce in leo tortor, et mollis turpis. In hac habitasse...

CSS

#top div a {
    float: left;
    margin-right:30px;
    border: 1px solid green;
    font-size: 25px;
    width: 70px;
}
#one {
margin-top: 55px;
}
#one, #two, #three, #four, #five{
 font-size: 18px; 
}   
h1{
margin: 0px;
}
#top {
position: fixed;
    top: 0;
    background-color: gray;
    float: left;
    width: 100%;
    height: 50px;
    opacity: 0.9;
}

JavaScript

$(document).ready(function(){
        $("a").click(function(e) {
            e.preventDefault();
            var hash = $(this).attr("href");
            //console.log($(hash).position().top);
            $('html, body').animate({ scrollTop: $(hash).position().top - 50 }, 200);
    
        });
    });