javascript – Jquery同时展开和滚动

2023年7月2日 171次阅读

我想知道以下是否可行.目前我有一些代码使用
jquery在页面底部打开DIV.这很简单：

$("#country_slide").slideToggle();

然后我有一些示例代码滚动到页面的底部(只是一个例子)：

$('html, body').animate({scrollTop:$(document).height()}, 'slow');

麻烦的是这个打开的div会在页面底部扩展时离开,所以我希望它不仅可以打开而且还可以向下滚动页面以显示现在打开的div,因为它正在打开.

我只能弄清楚如何完全扩展div,然后滚动到可用区域.我希望两个进程同时运行,而不是一个接一个地运行.

这有可能与jquery,如果是,有人可以解释如何.

最佳答案 看看这个小提琴：
JsFiddle

我正在调用事件,显示(show,fadeIn,slideDown等)并滚动到元素,当$(文档)准备就绪时.

我将显示功能的计时器设置为毫秒(3秒),滚动设置为4秒.您可以根据需要调整这些时间,以根据需要显示隐藏元素.

CSS

 #container{height:850px;background-color:red;width:300px;text-align:center; }
 #bottomDiv{display:none;position:relative;top:400px;width:260px;height:200px; background-color:dodgerblue;margin:20px auto;border: 1px solid #000000;text-align:center;}

HTML

 <div id="container" style="height:1500px;background-color:red;width:300px;">
      <p>I'm opening a div and scrolling below</p>
      <div id="bottomDiv" class="tempCss">Bottom Div</div>
 </div>

脚本

   $(document).ready(function(){
       $("#bottomDiv").slideDown(3000);
       $('html, body').animate({ scrollTop: $("#bottomDiv").offset().top }, 4000,function(){
       });  
   });
点赞