Question

我的头衔可能并不理解。这是我的问题：

页面底部有粘性页脚条，旁边有一个按钮。当我点击按钮时，我需要显示一个滑动的大型页脚。我很成功，直到这里。但我的问题是，当我显示超级页脚时，滚动条停留在同一位置。我希望滚动条粘在底部（专注于页脚条。）

HTML code：

<div class="body-container">
    <div class="my-content"> <span> Body Wrapper</span></div>
    <div class="footer-strip">Mini-footer-strip </div>
    <button id="show2">Click here</button>
    <div id="two">    
       Mega Footer Menu
    </div>
    <div style="clear:both;"> </div>
</div>

Jquery的：

$('document').ready(function() {
    $('#show2').click(function() {
        $('#two').slideToggle();
    });
});

CSS：

body {
    font-family: Helvetica, Arial, sans-serif;
}
.body-container{width:90%; display:block;height:auto;position:absolute;}
.my-content{
    height:600px;
    display:block;
    width:400px;
    position:relative;
    top:0;
    background-color:#ecdeca;}

div {
    background-color: #fff9d7;  
    border: 1px solid #e2c822;  
    color: #333333;  
    font-size: 13px;  
    font-weight: bold;  
    display: none;
    padding: 10px;
} 
#two {
    position:relative;
    bottom: 0;
    width: 70%;
    height: 200px;
}
#show2{
    position:absolute;
    right:0;
    bottom:0;
    z-index:9999;
}

.footer-strip{
    height:20px;
    display:block; 
    position:absolute;
    bottom:0;
    background-color:#eacdea;
    width:70%;
    z-index:9999;
}

希望我的问题很明确。：D

FIDDLE

Answer 1

$('document').ready(function() {
    $('#show2').click(function() {
        $('#two').slideToggle();

        $('html, body').animate({
      scrollTop: $("#two").offset().top + $('window').height()
    }, 2000);
    });
});

为div添加动画滚动。

Fiddle

当你问另一个滚动条向下时：

Scrollbar down fiddle

#two {
    position:absolute;
    bottom: 0;
    width: 70%;
    height: 200px;
    scroll:overflow;
}

如何在jquery中使用slideUp打开一个div，滚动条向下

1 个答案: