Question

所以，我有两个div s占据相同的页面高度（每个高度= 50％）。

<div class="first" id="first" style="height:50%;">
    First content
</div>
<div class="second" id="second" style="height:50%; display:none;">
    Second content
</div>

<script>
   jQuery("#first").click(function () {     
    jQuery('#second').show();       
    });
</script>

如您所见，第二部分仅在点击第一个div时显示。

如何制作页面（主要是移动版），向下滚动页面底部？

谢谢！

Answer 1

您需要做的是显示div隐藏，然后将html body设置为div的位置。

这是我的jsFiddle：https://jsfiddle.net/cxjwh79v/1/

的jQuery

$(function () {
    $("#first").on('click', function () {
        $('#second').show();
        $('html, body').animate({
            scrollTop: $("#second").offset().top
        }, 2500); // Change 2500 value to time it takes to scroll
    });
});

Answer 2

如果您希望第一个div覆盖页面，并在单击时滚动到第二个div，则在页面加载后在JavaScript中添加高度

http://codepen.io/anon/pen/ZGNWag

jQuery滚动到页面底部

2 个答案: