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

  • Inner page scrolling effect

    Simple jQuery content slider plugin

    • 342
    • 2
    • 342
    • facebook icon
    • twitter icon
    • google plus
  • Css3 solar system

    Css3 keyframe animation is an awesome feature, which facilitate us to animate element on the page.

    • 295
    • 11
    • 295
    • facebook icon
    • twitter icon
    • google plus
  • Copy text to clipboard

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

    • 243
    • 2
    • 243
    • 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