如何使用slidedown(）使网页滚动到正在制作动画的元素

How to make webpage scroll to element being animated using slidedown()?

本文关键字：动画 元素 滚动 slidedown 何使用 网页      更新时间：2023-09-26

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

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

我该怎么做？

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

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

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