title: How can I turn this scroll script I have into a single function?
body: <p>So I have a script that will allow the contents of a div to scroll smoothly when moused over some defined anchor tags. </p>
  
  <p>I'm wondering if rather than having to copy the the script over and change some of the selected elements and function names around each time I use the feature on a different part of the site, if I can just put the entire thing into a function that that I can then just pass values to?</p>
  
  <p>Here's link to JSFiddle that will give you an idea of how its basically working as of now. Thanks for any possible help!</p>
  
  <p><a href="http://jsfiddle.net/s5mgX/365/" rel="nofollow">http://jsfiddle.net/s5mgX/365/</a></p>
  
  <pre><code>var step = 50;
  var scrolling = false;
  
  // Wire up events for the 'scrollUp' link:
  $("#scrollUp").bind("click", function (event) {
      event.preventDefault();
      // Animates the scrollTop property by the specified
      // step.
      $("#feed").animate({
          scrollTop: "-=" + step + "px"
      });
  }).bind("mouseover", function (event) {
      scrolling = true;
      scrollContent("up");
  }).bind("mouseout", function (event) {
      scrolling = false;
  });
  
  
  $("#scrollDown").bind("click", function (event) {
      event.preventDefault();
      $("#feed").animate({
          scrollTop: "+=" + step + "px"
      });
  }).bind("mouseover", function (event) {
      scrolling = true;
      scrollContent("down");
  }).bind("mouseout", function (event) {
      scrolling = false;
  });
  
  function scrollContent(direction) {
      var amount = (direction === "up" ? "-=1px" : "+=1px");
      $("#feed").animate({
          scrollTop: amount
      }, 1, function () {
          if (scrolling) {
              scrollContent(direction);
          }
      });
  }
  
  
  //second scroll controller //
  var step = 50;
  var scrolling = false;
  
  // Wire up events for the 'scrollUp' link:
  $("#twoScrollUp").bind("click", function (event) {
      event.preventDefault();
      // Animates the scrollTop property by the specified
      // step.
      $("#feedTwo").animate({
          scrollTop: "-=" + step + "px"
      });
  }).bind("mouseover", function (event) {
      scrolling = true;
      twoScrollContent("up");
  }).bind("mouseout", function (event) {
      scrolling = false;
  });
  
  
  $("#twoScrollDown").bind("click", function (event) {
      event.preventDefault();
      $("#feedTwo").animate({
          scrollTop: "+=" + step + "px"
      });
  }).bind("mouseover", function (event) {
      scrolling = true;
      twoScrollContent("down");
  }).bind("mouseout", function (event) {
      scrolling = false;
  });
  
  function twoScrollContent(direction) {
      var amount = (direction === "up" ? "-=1px" : "+=1px");
      $("#feedTwo").animate({
          scrollTop: amount
      }, 1, function () {
          if (scrolling) {
              twoScrollContent(direction);
          }
      });
  }
  </code></pre>