title: Scrolling divs "left and right" and "up and down" using jQuery
body: <p>I'm working on <a href="http://www.alwaystwisted.com" rel="nofollow noreferrer">www.alwaystwisted.com</a>. The page has 4 divs that scroll via the main links down or up depending on what div you're on. </p>
  
  <p>I need this to work within the div, but left or right depending on what div you're on. I can't work it out and it's frying my brain.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
    function filterPath(string) {
      return string
        .replace(/^\//,'')
        .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
        .replace(/\/$/,'');
    }
    $('a[href*=#]').each(function() {
          if ( (filterPath(location.pathname) == filterPath(this.pathname))
          &amp;&amp; (location.hostname == this.hostname)
          &amp;&amp; (this.hash.replace(/#/,'')) ) {
              var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
              var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
               if ($target) {
               var divOffset = $target.parent().offset().top;
               var pOffset = $target.offset().top;
               var pScroll = pOffset - divOffset;
               $(this).click(function() {
                   $target.parent().animate({scrollTop: pScroll + 'px'}, 600);
                   return false;
               });
              }
          }
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I look forward to a helpful answer. Thanks in advance, Stu.</p>