0%

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

Sign in Sign up

Inner page scrolling effectBack

nav HTML setup:


Section HTML setup:

Homepage

.......

About

.......

Services

.......

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.
$("body,html").stop().animate({scrollTop:0},2000,'easeOutExpo');

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

//Run each function to assign window height to each section
$('section').each(function(){

//Assign height to each section
    $(this).css('height',winH+'px');
});

//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
$("body,html").stop().animate({scrollTop:pageTopPos},2000,'easeOutExpo');
});

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

  • Css3 image blending like photoshop

    CSS3 blend mode blends two background simultaneously like Photoshop blending.

    • 227
    • 4
    • 227
    • facebook icon
    • twitter icon
    • google plus
  • Get index of an element

    Get index of an element

    • 184
    • 2
    • 184
    • facebook icon
    • twitter icon
    • google plus
  • Removing file extension

    Remove file extension via .htaccess

    • 1
    • 0
    • 1
    • 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
Username
Password