Question

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

问题在于，因为链接是position:fixed，所以它不会向上移动到位于面板上方。

我希望按钮向上滑动，使其始终显示在面板上方。

第二个问题是点击该链接也会将您弹回页面顶部。我希望用户继续使用。

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

CSS＆amp; 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

只需添加return false：

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

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

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

jQuery在固定div上滑动切换

1 个答案: