Question

I’m currently working on my new website and I need help.

When you open the site you get a landing page with icons (sort of menu bar) and you can’t scroll.
When you click, tadaaaa it is a one page design. I am thinking about a javascript/jquery kind of script.

Current css:

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    overflow: hidden;
}

Example jquery:

$("nav").on("click", function(e) {
    $('html, body').css('overflowY', 'visible');
}

I am quite a noob about this so don’t blame me for a weird kind of script. I am trying to learn javascript and jquery.

Answer 1

You should do this by adding a class to your page to indicate its state, and then change the styling in your stylesheet.

HTML:

Show whole page

Congratulations. You are viewing the page

JS:

$(document).ready(function () {

  $("#loadpage").click(function () {
        $("html").addClass("loaded");
  });

});

CSS:

#page { display: none; }
html.loaded #page { display: block; }
html.loaded #loadpage { display: none; }

Demo:
http://jsfiddle.net/FHPzb/