Question

我在网站的每个页面（页脚）页面底部都有一个div。我有一个按钮来扩展该div，但我希望它也可以向下滚动页面，以便用户可以实际看到扩展的内容。目前，我有：

＆＃13;

$(document).ready(function () {
    $("#footerContent").on("hide.bs.collapse", function () {
        $(".btn").html('INFO <span class="glyphicon glyphicon glyphicon-plus"></span>');
    });
    $("#footerContent").on("show.bs.collapse", function () {
        $(".btn").html('INFO <span class="glyphicon glyphicon-minus"></span>');
    });
});

＆＃13;

.btn-success, .btn-success:hover, .btn-success:active {
    color: #848484;
    background-color: #FFFFFF;
    border-color: #fff;
}

＆＃13;

<script src="http://able.thebrewroom.com/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-success" data-toggle="collapse" data-target="#footerContent">INFO <span class="glyphicon glyphicon-plus"></span>
</button>
<div id="footerContent" class="collapse">some content here</div>

＆＃13;

是的，我知道，这是一个糟糕的用户体验，我试图向设计师解释，但无论如何他们想要这样做。我只想让按钮展开DIV，然后让页面向下滚动以便我可以实际看到内容。谢谢！

Answer 1

你需要的是思考中的scrollTo函数，请查看以下链接，他们在示例部分以创新的方式使用它，

http://demos.flesler.com/jquery/scrollTo/

使用按钮展开div，然后将页面滚动到该div

1 个答案: