4

我在我的网站上实现了滑动切换功能。单击一个链接将导致其下方的 div 向上滑动到视图中。

问题是因为链接是position:fixed它不会向上移动到面板上方。

我希望按钮向上滑动，以便它始终显示在面板上方。

在此处查看实时预览（篮子的底角链接）

第二个问题是单击链接也会使您跳到页面顶部。我希望用户保持原状。

<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

4

1 回答 1

2

只需添加return false：

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

该链接尝试导航到锚点#，这是页面的顶部。返回 false 禁用链接的默认行为。

对于定位，只需使用一个带有按钮和篮子的固定 div：http: //jsfiddle.net/w1ll3m/9fZsj/3/

于 2013-06-05T16:20:16.913 回答