javascript - 从顶部显示 div 元素以显示其内容

Question

我有一个带有类面板的 div 元素。我想要的是当我单击带有类的锚标记时，open它应该显示带有类的 div 容器panel并将其向下滑动。

在我当前的代码中，我有两个与 class 的链接open。当我单击其中任何一个时，它会为面板设置动画。但是当我单击底部的锚标记时，直到我向上滚动才能看到该元素。

我怎样才能使这个动画成为可能，以便我点击页面上任何位置的链接，然后我必须看到面板被动画和显示？

这是我的代码在这里

Answer 1

我想到了2种方法，

首先：你设置面板的CSS位置：固定；用户可以从任何地方看到面板，

这是演示

或第二种方式：您为每次点击设置多个条件函数

 $('.openTop').click(function(e) {
          e.preventDefault();
          $('.panel').animate({top:'300'},500).show();
 });
 $('.openBottom').click(function(e) {
          e.preventDefault();
          $('.panel').animate({top:'1000'},500).show();
});

Answer 2

这可以使用简单的方式完成

$(document).scrollTop()

JS：

$('.open').click(function(e) {
    e.preventDefault();
    var topVal = $(document).scrollTop() + 300;
    $('.panel').animate({top:'+='+topVal}).show();
});

参考现场演示