如何使用slidedown()使网页滚动到正在被动画的元素？
提问于 2013-07-09 00:21:32
我在我的网页底部有一个<div>，它在页面加载时被隐藏，在可见的页脚中有一个链接，它使用jQuery slidedown()函数向下滑动以显示。还有一个链接可以再次隐藏它。
要打开的链接：
<a href="javascript:void(0)" class="cookies_open">Open</a>带有隐藏链接的元素：
<div id="hiddenbit">
<a href="javascript:void(0)" class="cookies_close">hide</a>
</div>JS：
$(document).ready(function(){
$(".cookies_close").click(function(){
$("#hiddenbit").slideUp(1000);
});
$(".cookies_open").click(function(){
$("#hiddenbit").slideDown(1000);
});
});现在，上面的所有工作都可以了。但是，因为元素在页面的底部，所以我需要浏览器向下滚动，以便在打开它时将其显示在视图中。此时，滚动条会展开，但页面不会向下滚动，因此用户看不到它。
我该怎么做呢？
回答 2
Stack Overflow用户
发布于 2014-03-09 10:06:33
可以将元素的id指定为超链接的href，以使其显示。
您还需要将元素从正常流程中删除，以便滚动大小不会发生变化-为此，我应用了position:absolute。
$(document).ready(function () {
$(".cookies_close").click(function () {
$("#hiddenbit").slideUp(1000);
});
$(".cookies_open").click(function () {
$("#hiddenbit").slideDown(1000);
});
});* {
/* prevent browser defaults*/
margin:0px !important;
padding:0px !important;
}
html, body, #wrapper {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
position:relative;
text-align:center;
background: #58D3F7;
height: 100%;
}
#hiddenbit{
display:none;
position:absolute;
bottom:0;
width:100%;
height:100px;
background:hotpink;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
<header></header>
<div id="content"> <a href="#hiddenbit" class="cookies_open">Open</a>
<div id="hiddenbit">
<a href="javascript:void(0)" class="cookies_close">hide</a>
</div>
</div>
<div>
Stack Overflow用户
发布于 2013-07-09 00:41:25
在您的click事件中添加以下内容：
//xpos : it will be 0 for you
//ypos: you give some value, it will scrolldown with that pixel
window.scrollTo(xpos,ypos);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17538036
复制相关文章
点击加载更多
腾讯云开发者
