Question

我的网页底部有<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);
 });
});

现在，所有上述工作。但是，因为元素位于页面的底部，所以我需要浏览器向下滚动以在打开时将其带入视图。此时，滚动条会展开，但页面不会向下滚动，因此用户无法看到它。

我该怎么做？

Answer 1

您可以将元素的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>

Answer 2

在click事件中添加以下内容：

//xpos : it will be 0 for you
//ypos: you give some value, it will scrolldown with that pixel
window.scrollTo(xpos,ypos);

如何使用slidedown（）将网页滚动到动画元素？

2 个答案: