title: jQuery slide toggle on a fixed div
body: <p>I've implemented a slide toggle function on my site. Click a link will cause the div below it to slide up into view.</p>
  
  <p>The problem is that because the link is <code>position:fixed</code> it does not move up to sit above the panel.</p>
  
  <p>I'd like the button to slide up so that it always appears above the panel.</p>
  
  <p><a href="http://www.traceybridaldressmaker.co.uk/dollybag-lace.html#" rel="nofollow">See live preview here</a> (bottom corner link for basket)</p>
  
  <p>A second issue is that clicking the link also bounces you to the top of the page. I'd like the user to remain put.</p>
  
  <pre><code>&lt;script&gt; 
  $(document).ready(function(){
    $(".basketButton").click(function(){
      $(".basket").slideToggle("slow");
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS &amp; HTML</p>
  
  <pre><code>&lt;!-- Basket overlay --&gt;
      &lt;div class="basketButton"&gt;
          &lt;a href=""&gt;Your Shopping Bag&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="basket"&gt;
          &lt;h3&gt;Your Shopping Bag&lt;/h3&gt;
      &lt;/div&gt;
  
  /* Basket */
  
  .basketButton{
      position:fixed;
      bottom:25px;
      right:25px;
      background-image:url('images/pinkbag.png');
      padding-left:60px;
      display:inline-block;
      background-repeat: no-repeat;
      height: 67px;
  }
  
  .basketButton a{
  
      font-weight:bold;
      font-size:18px;
      color: #67062F;
      padding-top:15px;
      display:inline-block;
  }
  
  .basket{
      display:none;
      width:250px;
      height:200px;
      padding:10px;
      border-radius:5px;
      position:fixed;
      bottom:25px;
      right:25px;
      background-image:url('images/pink-bg.png');
  }
  
  .basket h3{
      color:#FFF;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/9fZsj" rel="nofollow">JSFiddle</a></p>