jQuery slide toggle on a fixed div

Question

I've implemented a slide toggle function on my site. Click a link will cause the div below it to slide up into view.

The problem is that because the link is position:fixed it does not move up to sit above the panel.

I'd like the button to slide up so that it always appears above the panel.

See live preview here (bottom corner link for basket)

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.

<script> 
$(document).ready(function(){
  $(".basketButton").click(function(){
    $(".basket").slideToggle("slow");
  });
});
</script>

CSS & HTML

<!-- Basket overlay -->
    <div class="basketButton">
        <a href="">Your Shopping Bag</a>
    </div>
    <div class="basket">
        <h3>Your Shopping Bag</h3>
    </div>

/* 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;
}

JSFiddle

Answer 1

Just add return false:

<script> 
$(document).ready(function(){
  $(".basketButton").click(function(){
    $(".basket").slideToggle("slow");
    return false;
  });
});
</script>

The link tries to navigate to the anchor #, and that's the top of the page. Return false disables the default behavior of the link.

For the positioning just use one fixed div with the button and the basket inside: http://jsfiddle.net/w1ll3m/9fZsj/3/