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

  • Auto responsive dropdown menu

    Auto responsive dropdown menu plugin

    • 485
    • 48
    • 485
    • facebook icon
    • twitter icon
    • google plus
  • Side pusher hamburger menu

    Side pusher hamburger menu is a better way put more content on the page.

    • 465
    • 8
    • 465
    • facebook icon
    • twitter icon
    • google plus
  • How to get system ip through jquery or javascript ?

    This is not possible to access the IP address through javascript.

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