Javascript CSS-在单击之前不可见的div时向上滑动_Javascript_Jquery_Html_Css

Javascript CSS-在单击之前不可见的div时向上滑动

javascript jquery html css

Javascript CSS-在单击之前不可见的div时向上滑动,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个页面的一部分，我希望点击事件将滚动顶部动画化到div。面板二。我尝试了一些jQuery插件，但没有任何效果。我遇到的问题是，如果div不可见并且无法设置scrollIntoView的动画，我就不能使用scrollTop 这是html： <body>  <button class="close-button" aria-label="Close menu" type="button" data-close&g

我有一个页面的一部分，我希望点击事件将

滚动顶部

动画化到div

。面板二

。我尝试了一些jQuery插件，但没有任何效果。我遇到的问题是，如果div不可见并且无法设置

scrollIntoView

的动画，我就不能使用scrollTop

这是html：

<body>

  <!-- Close button -->
  <button class="close-button" aria-label="Close menu" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>

  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
    <!-- Menu -->
    <ul class="vertical menu">
      <li><a href="#">Foundation</a></li>
      <li><a href="#">Dot</a></li>
      <li><a href="#">ZURB</a></li>
      <li><a href="#">Com</a></li>
      <li><a href="#">Slash</a></li>
      <li><a href="#">Sites</a></li>
    </ul>
  </div>

  <div id="bg">
  </div>
  <div class="panel panel-one">
    <div class="panel-inner">
      <div class="content">
        <h1>Lorem ipsum dolor sit amet</h1>
        <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit
          ligula pharetra.</p>
      </div>
    </div>
  </div>

  <div class="panel panel-two">
    <div class="panel-inner">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit
        ligula pharetra.</p>
    </div>
  </div>

</body>


&时代；








Lorem ipsum dolor sit amet
Donec id ipsum odio。在这之前，你必须要有充足的精力。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。塞德·ac·奥奇精英。努克·福西布斯·厄洛斯·瓦普特·阿利奎姆·维勒·布兰迪特
舌苔
Lorem ipsum dolor sit amet
Donec id ipsum odio。在这之前，你必须要有充足的精力。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。塞德·ac·奥奇精英。努克·福西布斯·厄洛斯·瓦普特·阿利奎姆·维勒·布兰迪特
舌苔

我计划在

.panel one

div中使用一个滑块，其中包含图像，单击图像后，将向上滚动相关div以接管屏幕

.panel one

div需要占据整个屏幕，用户不能向下滚动。只有在单击图像时，

.panel 2

div向上滑动后，用户才能再次向上滚动显示

.panel 1

div

.panel 2

应该会消失在屏幕下方。

答案可能有点晚，但我想这会帮助您将图像滑块放在

panel 1

中：

$(document).scroll(function() {
  if ($(window).scrollTop() == 0)
    $('body').css('overflow', 'hidden');
});

首先，我隐藏滚动条：

$('body').css('overflow', 'hidden');

在

面板一上

单击，可以设置到

面板二的动画：
$(".panel-one").on('click', function() {
  $('html, body').animate({
    scrollTop: $('.panel-two').offset().top
  }, 1000, function() {
    $('body').css('overflow', 'auto');
 });
});

另外，不要忘记在动画结束时打开溢出


现在添加一个滚动
监听器，在用户滚动到面板一的顶部时隐藏滚动条：
$(document).scroll(function() {
  if ($(window).scrollTop() == 0)
    $('body').css('overflow', 'hidden');
});


请参见下面的演示：

$（“.close按钮”）。在（'click'，function（）上{
if（$（“#offCanvas”）.css（'margin-left'）<'0'）{
$（“#offCanvas”）.css（'margin-left'，'0'）；
$（“.panel”）.css（'margin-left'，'50%”）；
$（“#bg”）.css（'margin-left'，'50%）；
}否则{
$（“#offCanvas”）.css（'margin-left'，'-50%）；
$（“.panel”）.css（'margin-left'，'0'）；
$（“#bg”）.css（'margin-left'，'0'）；
}
});
$（'body'）.css（'overflow'，'hidden'）；
$（“.panel one”）。在（'click'，function（）上{
$（'html，body'）。设置动画({
scrollTop:$（'.panel two'）.offset（）.top
}，1000，函数（）{
$（'body'）.css（'overflow'，'auto'）；
});
});
$（文档）。滚动（函数（）{
if（$（窗口）.scrollTop（）==0）
$（'body'）.css（'overflow'，'hidden'）；
});
#offCanvas{
位置：固定；
z指数：999；
背景色：黑色；
宽度：50%；
左边缘：-50%；
身高：100%；
}
.关闭按钮{
位置：固定；
z指数：1000；
}
#背景{
背景图像：url（'https://unsplash.it/500?random');
背景尺寸：封面；
z指数：-1；
动画：缩放10秒；
身高：100%；
宽度：100vw；
位置：固定；
-webkit动画填充模式：正向；
背景附件：固定；
}
@关键帧缩放{
0% {
变换：比例（1,1）；
}
100% {
变换：比例（1.1,1.1）；
}
}
html，
身体{
保证金：0；
身高：100%；
}
.小组{
位置：相对位置；
最小高度：100vh；
宽度：100%；
z指数：5；
}
.面板固定{
z指数：1；
}
.面板内部{
填充：1em；
宽度：100%；
}
.面板固定。面板内部{
位置：固定；
排名：0；
左：0；
z指数：2；
}
/*基地*/
*,
*：之前，
*：之后{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.第二小组{
背景颜色：蓝色；
}
.内容{
位置：固定；
}
身体{
溢出x：隐藏；
}

&时代；














Lorem ipsum dolor sit amet
Donec id ipsum odio。在这之前，你必须要有充足的精力。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。塞德·ac·奥奇精英。努克·福西布斯·厄洛斯·瓦普特·阿利奎姆·维勒·布兰迪特
舌苔
Lorem ipsum dolor sit amet
Donec id ipsum odio。在这之前，你必须要有充足的精力。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。塞德·ac·奥奇精英。努克·福西布斯·厄洛斯·瓦普特·阿利奎姆·维勒·布兰迪特
舌苔
我不明白你的目标是什么。是否要创建某种“向下滚动”/“查看更多”按钮，将页面滚动到下一节/div/面板？抱歉，我很想提供帮助，但我不明白您想要实现什么。你有没有看到任何可以展示给我们的工作示例？@Leff让我知道你对这个答案的想法，谢谢！