4

我的网页底部有一个在页面加载时隐藏的链接，可见页脚中有一个链接，使用 jQuery函数<div>使其向下滑动显示。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);
 });
});

现在，上述所有工作。但是，因为该元素位于页面底部，所以我需要浏览器向下滚动以在打开时将其显示出来。目前，滚动条展开，但页面没有向下滚动，因此用户看不到它。

我该怎么做？

4

2 回答 2

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>

于 2014-03-09T10:06:33.253 回答
0

在您的click活动中添加以下内容：

//xpos : it will be 0 for you
//ypos: you give some value, it will scrolldown with that pixel
window.scrollTo(xpos,ypos);
于 2013-07-09T00:41:24.653 回答