Need smooth scroll

[vizz]

Following code sets page(div's:- home,about,services etc ) height to 600px and when menus are clicked travels to perticular div. But it is not scrolling smoothly. It goes directly to that perticular DIV.

I have used animationTime = 900, but it is not working. How to control scroll speed using animationTime = 900? I want smooth scrolling

<div class="container">

    <div id="nav">
        <ul class="nav-list">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#clients">Clients</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>

    <div id="home"></div>
    <div id="about"></div>
    <div id="services"></div>
    <div id="portfolio"></div>
    <div id="clients"></div>
    <div id="contact"></div>

</div>

script

var navOffsetTop = 300,  
// measure from the top of the viewport to X pixels down

navElHeight = 30,
curPage = 1,
edgeMargin = 20,  
// margin above the top or margin from the end of the page

animationTime = 900,  // time in milliseconds
contentTop = [];


function savePageHeights() {
contentTop = [];
// Set up content an array of locations
$('#nav a').each(function() {
contentTop.push($($(this).attr('href')).offset().top);
})
navOffsetTop = $("nav").offset().top - $(window).scrollTop();
navElHeight = $("nav li").height();
}

function resizeDiv() {
var ph = document.body.offsetHeight;
ph = (ph > 600 ? ph : 600);
ph = (ph > 1080 ? 1080 : ph);

$(".container >#home,#about,#services,#portfolio,#clients,#contact").css("height", ph + "px");   
}


$(document).ready(function() {    

    $(".container > #home,#about,#services,#portfolio,#clients,#contact").each(function(el) {
    $(this).css("height", this.parentNode.parentNode.clientHeight + "px");
    });

    savePageHeights();

    // Animate menu scroll to content
    $('#nav').find('a').click(function() {
    $('#nav li').addClass("no-animation");
    var sel = this;
    var newTop = contentTop[$('#nav a').index($(this))];

    // get content top or top position if at the document bottom
    $('html,body').stop().animate({
      'scrollTop': newTop
    }, animationTime, function() {
      $('#nav li').removeClass("no-animation");
      $("#nav ul").removeClass().addClass($(sel).attr('id'));

      window.location.hash = $(sel).attr('href');
    });

    return false;
    });


});

[vizz]

Please help me for smooth scroll. I have edited my again code. Here is example jQuery page scrolling what I want.

My code is working only at once and then it stops scrolling smoothly.

//start header script
$(window).scroll(function(){

if ($(window).scrollTop() > 100) {
    $('#header').fadeOut();
    $('#header2').fadeIn();
}
else {
   if ($(window).scrollTop()< 100) {
       $('#header').fadeIn();     
       $('#header2').fadeOut();
   }
}

});
//end header script


//page scrolling and fix height started

var navOffsetTop = 300,
// measure from the top of the viewport to X pixels down
navElHeight = 30,
curPage = 1,
edgeMargin = 20,
// margin above the top or margin from the end of the page
animationTime = 800,
// time in milliseconds
contentTop = [];

function savePageHeights() {
contentTop = [];
// Set up content an array of locations
$('#nav li').find('a').each(function() {
contentTop.push($($(this).attr('href')).offset().top);
})
navOffsetTop = $("#nav").offset().top - $(window).scrollTop();
navElHeight = $("#nav li").height();
}

function pageResizer() {
var ph = document.body.offsetHeight;
ph = (ph > 600 ? ph : 600);
ph = (ph > 1080 ? 1080 : ph);
$(".container > #home,#about,#services,#portfolio,#clients,#contact").css("height", ph + "px");
}

$(document).ready(function() {             

$(".container > #home,#about,#services,#portfolio,#clients,#contact").each(function(el) {
$(this).css("height", this.parentNode.parentNode.clientHeight + "px");
});

savePageHeights();  

// Animate menu scroll to content
$('#nav').find('a').click(function() {
$('#nav li').addClass("no-animation");
var sel = this;
var newTop = contentTop[$('#nav a').index($(this))];

// get content top or top position if at the document bottom
$('html,body').stop().animate({
  'scrollTop': newTop
}, animationTime, function() {
  //$('#nav li').removeClass("no-animation");
//  $("#nav ul").removeClass().addClass($(sel).attr('id'));

 // window.location.hash = $(sel).attr('href');
});

return false;
});


});

[vizz]

This is my final code for which all code works fine without $(window).scroll(function(){ });. If I remove this everything works well.

Please help

var navOffsetTop = 300,
// measure from the top of the viewport to X pixels down
navElHeight = 30,
curPage = 1,
edgeMargin = 20,
// margin above the top or margin from the end of the page
animationTime = 800,
// time in milliseconds
contentTop = [];

function savePageHeights() {
contentTop = [];
// Set up content an array of locations
$('#nav li').find('a').each(function() {
contentTop.push($($(this).attr('href')).offset().top);
})
navOffsetTop = $("#nav").offset().top - $(window).scrollTop();
navElHeight = $("#nav li").height();
}

function pageResizer() {
var ph = document.body.offsetHeight;
ph = (ph > 600 ? ph : 600);
ph = (ph > 1080 ? 1080 : ph);
$(".container > #home,#about,#services,#portfolio,#clients,#contact").css("height", ph + "px");
}

$(document).ready(function() {   

$(".container > #home,#about,#services,#portfolio,#clients,#contact").each(function(el) {
$(this).css("height", this.parentNode.parentNode.clientHeight + "px");
});

savePageHeights();  

// Animate menu scroll to content
$('#nav').find('a').click(function() {
$('#nav li').addClass("no-animation");
var sel = this;
var newTop = contentTop[$('#nav a').index($(this))];

// get content top or top position if at the document bottom
$('html,body').stop().animate({
  'scrollTop': newTop
}, animationTime, function() {   });

return false;

});

});



//Problematic code. Need to solve
$(window).scroll(function(){

    if ($(window).scrollTop() > 100) {
        $('#header').fadeOut();
        $('#header2').fadeIn();
    }
    else {
       if ($(window).scrollTop()< 100) {
           $('#header').fadeIn();     
           $('#header2').fadeOut();
       }
    }
});

[AleMonteiro]

Hi, try jQuery scrollTo plugin. I used a couple of times and it works very nice.

http://flesler.blogspot.com.br/2007/10/jqueryscrollto.html

[vizz]

thanks