ScrollTop

Custom Function for single page scrolling

by nsharma

HTML

<section class="container" style="position:fixed;background:red;height:90px;width:100%">
<a href="#" data-id="idOne" class="active">one</a><a href="#" data-id="idTwo">Two</a><a href="#" data-id="idThree">three</a>
</section>
<div id="idOne" style="padding-top:100px">
<h1>ONE</h1>
<p>One of the more useful regexes on the list. It matches any HTML tag with the content inside. As usually, we begin with the start of the line.
First comes the tag’s name. It must be one or more letters long. This is the first capture group, it comes in handy when we have to grab the closing tag. The next thing are the tag’s attributes. This is any character but a greater than sign (>). Since this is optional, but I want to match more than one character, the star is used. The plus sign makes up the attribute and value, and the star says as many attributes as you want.
Next comes the third non-capture group. Inside, it will contain either a greater than sign, some content, and a closing tag; or some spaces, a forward slash, and a greater than sign. The first option looks for a greater than sign followed by any number of characters, and the closing tag. \1 is used which represents the content that was captured in the first capturing group. In this case it was the tag’s name. Now, if that couldn’t be matched we want to look for a self closing tag (like an img, br, or hr tag). This needs to have one or more spaces followed by “/>”.
The regex is ended with the end of the line.</p>

<p>One of the more useful regexes on the list. It matches any HTML tag with the content inside. As usually, we begin with the start of the line.
First comes the tag’s name. It must be one or more letters long. This is the first capture group, it comes in handy when we have to grab the closing tag. The next thing are the tag’s attributes. This is any character but a greater than sign (>). Since this is optional, but I want to match more than one character, the star is used. The plus sign makes up the attribute and...

CSS

*{margin:0px;padding:0px;}
.active{font-weight:bold;}
body,html{overflow-y:hidden;}

JavaScript

(function() {

    var height = $(window).height();
    $('div').css('height', height);

    $("a").on('click', function(e) {
        e.preventDefault();

        $('a').removeClass('active');
        $(this).addClass('active');


        var id = $(this).attr('data-id'),
            scrollTo = $('#' + id);



        $('html, body').animate({
            scrollTop: scrollTo.offset().top - '90' + 'px'
        });
    })


})();