JQuery - Create + calling functions

[ttmt]

Hi all

http://www.ttmt.org.uk/forum/portfolio_1/#

I have this simple photo gallery where the different sections scroll in after clicking the navigation. Everything is working fine but I wanted to create a function for the scrolling thats done with jQuery.

At the moment I have 3 separate functions for the 3 buttons, they are all doing the same thing apart from the positions of the scroling.

  $(function(){
      var $content = $('#content');
      $('#flora').click(function() {
        var floraPos = $('#content #flowers').position();
        var scrollPosition = $content.scrollTop() + floraPos.top;
        $('#content').animate({scrollTop: scrollPosition}, 500);
      });
      $('#beach').click(function() {
        var beachPos = $('#content #beach').position();
        var scrollPosition = $content.scrollTop() + beachPos.top;
        $('#content').animate({scrollTop: scrollPosition}, 500);
      });
      $('#plane').click(function() {
        var planePos = $('#content #planes').position();
        var scrollPosition = $content.scrollTop() + planePos.top;
        $('#content').animate({scrollTop: scrollPosition}, 500);
      });
    })

I tried doing it like this - passing in the div

 $(function(){	  
      function slideContent(div){
        var $content = $('#content');
        var divPos = $('#content div').position();
        var scrollPosition = #content.scrollTop()+divPos.top;
        $('#content').animate({scrollTop: scrollPosition}, 500);
      }
    })

and calling it like this

 <li><a href="#" id="plane" onclick="slideContent(#planes)">Planes</a></li>

Where am I going wrong? Is it possible to do this ?

[Fang]

      function slideContent(elm){
        var $content = $('#content');
        var divPos = $(elm).position();
        var scrollPosition = $content.scrollTop()+divPos.top;
        $('#content').animate({scrollTop: scrollPosition}, 500);
      }

<a href="#" id="plane" onclick="slideContent(document.getElementById('planes'))">Planes</a>