最近我陷入了死胡同。我正在尝试扩展页脚(#footernotes),这基本上是一个div在body后面(用z-index完成),当您点击按钮时,它会向下移动。滚动条也随之移动,这意味着页面现在更长了。
但是,我想要做的是让视口跟随扩展的div一起移动。现在发生的情况是,当我按下按钮(.secret)时,div (#footernotes) 出现了,但仍然不在视口内,除非您手动滚动以查看更长的页面。
那么总结一下,如何使视口在您扩展页面后自动向下滚动?换句话说,如何使视口停留在页面底部。
以下是我的代码:
但是,我想要做的是让视口跟随扩展的div一起移动。现在发生的情况是,当我按下按钮(.secret)时,div (#footernotes) 出现了,但仍然不在视口内,除非您手动滚动以查看更长的页面。
那么总结一下,如何使视口在您扩展页面后自动向下滚动?换句话说,如何使视口停留在页面底部。
以下是我的代码:
<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
#footernotes {
background-color: red;
width: 100%;
position: relative;
top: -80px;
height: 150px;
z-index: -400;
}
编辑:在输入问题时,我找到了答案,需要使用scrollTop。我已经在下面的示例中添加了代码行:
<script>
$(document).ready(function(){
$('.secret').click(function(){
$("#footernotes").animate({top: "100px"}, 1000);
$('body,html').animate({scrollTop: "210px"},1000);
return false;
});
});
</script>
如果您认为有更好的方法,仍然可以回答这个问题,我只是觉得我会发布这个问题,以防其他人有相同的问题。
div
后面还有更多内容,则可能需要给该方法一个false
参数,以便将其与视图底部而不是顶部对齐。请查看:https://developer.mozilla.org/en-US/docs/DOM/element.scrollIntoView - mavili