当div在页面底部展开时如何自动滚动？ [英] How to automatically scroll when div expands at bottom of page?

问题描述

最近我进入了死胡同。我试图扩展页脚（#footernotes）和工程，它基本上是一个div身体（使用z-index），当你点击一个按钮，它向下移动。滚动条也与它一起，意味着页面现在更长。

Lately I have come into a dead end. I'm trying to expand the footer (#footernotes) and that works, it's basically a div behind the body (done with z-index) and when you click on a button it moves down. The scroll bar goes with it too, meaning that the page is now longer.

但我想做的是使视口随展开的div移动。现在发生的是，当我按下按钮（.secret）div（#footernotes）进来，但它仍然在视口之外，除非你手动滚动来查看较长的页面。

But what I'm trying to do is to make the viewport move with the expanded div. What happens now is that when I press the button (.secret) the div (#footernotes) comes in but it is still out of the viewport UNLESS you manually scroll to view the longer page.

因此，对于某些它，你如何使视口在扩展页面后自动向下滚动？

So to some it up, how do you make the viewport automatically scroll down after you expanded the page? In other words, how do you make the viewport stay at the bottom of the page.

这是我的代码：

<script>
$(document).ready(function(){
    $('.secret').click(function(){
            $("#footernotes").animate({top: "100px"}, 1000);
        return false;
    });
});
</script>

<div id="footer">
    <a href="" class="secret" ><div id="buttontest" style="width:50px; height:50px; background-color:green;"></div></a>
    <div id="footernotes">
    </div>
</div> <!-- end #footer -->

#footernotes的CSS

And the CSS for #footernotes

#footernotes {
    background-color: red;
    width: 100%;
    position: relative;
    top: -80px;
    height: 150px;
    z-index: -400;
}

EDIT：出来的答案，你必须使用scrollTop。我在下面的例子中添加了行代码：

While typing up the question I figure out the answer, you have to use the scrollTop. I have added the line code in the example below:

<script>
    $(document).ready(function(){
        $('.secret').click(function(){
                $("#footernotes").animate({top: "100px"}, 1000);
                $('body,html').animate({scrollTop: "210px"},1000);
            return false;
        });
    });
    </script>

你仍然可以回答这个问题，如果你认为有更好的方法，我只是想我会离开

You can still answer this if you think there is a better way, I just thought I'll leave this question posted in case other people have the same question.

推荐答案

document.getElementById('divID').scrollIntoView();

尝试看看是否能完成这项工作。

try and see if that would do the job.

这篇关于当div在页面底部展开时如何自动滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！