0

我有一个“滑出” div，我通过 CSS 定位隐藏/显示，并使用 jquery 切换设置 div 的隐藏/显示状态的类。

这一切都很好。我现在要做的是让页面上更远的任何链接更改类以显示 div，然后从页面跳转到它。

这是我所拥有的：

$('a[href="#request-trial"]').click(function () {
  $("#request-trial").toggleClass("on off");
});

问题是它首先跳到锚点，然后改变类，所以当它“关闭”而不是“打开”时它跳到 div 的位置 - 这有意义吗？有没有人有什么建议？

添加一些额外的信息：

HTML：

<section class="form-popup on" id="request-trial">
<div class="container">
<h1>Let's Talk more!</h1>
<p>Have a project in mind or have an organizational challenge you need assistance in tackling? Get in touch... we’ll discuss ways that the Beyond Nines team could help.</p>

<a class="close">Close</a>
</div>
</section>

链接类似于：

<a href="#request-trial">Sign up</a>

CSS：

.form-popup,
.form-popup.on {
position: absolute;
height: 500px;
z-index: 0;
bottom: 0px;
opacity: 1;
 }

 .form-popup.off {

 bottom: -580px;
 opacity: 0;

  }
4

2 回答 2

0

试试这个：

http://jsfiddle.net/Ag98N/2/

var documentBody = (($.browser.chrome)||($.browser.safari)) ? document.body : document.documentElement;
      $('a[href="#request-trial"]').click(function (e) {
         e.preventDefault();
         var $targetElem = $("#request-trial")
         $targetElem.toggleClass("on off");
          if($targetElem.is('.on'))
         $(documentBody).animate({scrollTop: $targetElem.offset().top}, 50);
      });
于 2013-01-21T19:55:33.577 回答
0

这是我的代码

$('a[href="#request-trial"]').click(function(evt) {
  evt.preventDefault();
  var target = $("#request-trial");
  target.toggleClass("on off");
  if (target.length > 0 && target.hasClass("on"))
  {
     $("html, body").animate({
         scrollTop: target.offset().top - $(window).height()
     }, 500);
  } 
});
于 2013-01-21T19:58:07.957 回答