making ajax content scroll into view

[markdunbavan]

Hi.

I am trying to develop a part of a site that requires ajax content to be loaded onto it via a server. I have made the content load and scroll up into view but for some reason the footer goes with it so instead I just had it fade in from display hidden. Here is the link.

http://www.markdunbavan.co.uk/dev/OS

The other problem I am facing is I want the about button to be able to do exactly the same thing as the contact button does but at the min its really complicated. Here is the code I used;

   1. $(document).ready(function(){
   2.     $('.log').ajaxStart(function() {
   3.   $(this).text('Triggered ajaxStart handler.');
   4. });
   5. $('#contactbutton').click(function() {
   6.   $('.result').load('pages/index.html');
   7.   $('#contactcontent').delay(600).fadeIn(1400);
   8.     $('#contactcontent').fadeIn(1400).animate({
   9.     overflow: 'hidden',
  10.     opacity: '1.0',
  11.     marginTop: '0px',
  12.   }, {
  13.     duration: 1000,
  14.     specialEasing: {
  15.       top: 'easeInOutQuad'
  16.     },
  17.   });
  18.   $('#folio').animate({
  19.     top: '-900px',
  20.     opacity: '0.2',
  21.     overflow: 'hidden'
  22.   }, {
  23.     duration: 1000,
  24.     specialEasing: {
  25.       top: 'easeInOutQuad'
  26.     },
  27.   });
  28. });
  29. });
  30. $(document).ready(function(){
  31. /*next ajax loader section for about page also*/
  32. $('.log2').ajaxStart(function() {
  33.   $(this).text('Triggered ajaxStart handler.');
  34. });
  35. $('#aboutscrollbutton').click(function() {
  36.   $('.result2').load('pages/about.html');
  37.   $('#aboutcontent2').delay(600).fadeIn(1400);
  38.     $('#aboutcontent2').fadeIn(1400).animate({
  39.     overflow: 'hidden',
  40.     opacity: '1.0',
  41.     marginTop: '0px',
  42.   }, {
  43.     duration: 1000,
  44.     specialEasing: {
  45.       top: 'easeInOutQuad'
  46.     },
  47.   });
  48.   $('#folio').animate({
  49.     top: '-900px',
  50.     opacity: '0.2',
  51.     overflow: 'hidden'
  52.   }, {
  53.     duration: 1000,
  54.     specialEasing: {
  55.       top: 'easeInOutQuad'
  56.     },
  57.   });
  58. });
  59. });

I am having trouble making this work. Would anyone know how to do this sort of thing?

Regards

Mark Dunbavan