javascript - 如何使网页滚动到使用 slidedown() 动画的元素？

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>