Hey! Do you have any query related to front end?

Sign in Sign up

Inner page scrolling effectBack

nav HTML setup:

Section HTML setup:







Initialize class for each and every section, which will be used as location for content.

Scripts to be included:

Easing library has been included for smooth transition.

Main code:

//Animate page to top on load.

//Calculate window height
var winH = $(window).height();

//Run each function to assign window height to each section

//Assign height to each section

//Assign click event on side nav
$('nav a').click(function(){

/Get rel attribute of each nav a tag.
var aLocation = $(this).attr('rel');

//Get top position of section with respect to nav rel value.
var pageTopPos = $('section.'+aLocation).offset().top;

//Animate the body and HTML respective to top value

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Copy text to clipboard

    Copy text from browser to your clipboard and paste as per your requirement.

    • 302
    • 2
    • 302
    • facebook icon
    • twitter icon
    • google plus
  • Before and after vs empty tag

    Adding before and after to an non container element is no possible.

    • 7
    • 1
    • 7
    • facebook icon
    • twitter icon
    • google plus
  • Simple overlay popup with css3 and jquery

    Visibility hidden and opacity zero, together can beat display none property, which gives height zero during run time.

    • 276
    • 7
    • 276
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back