0

CSSポジショニングを介して非表示/表示している「スライドアウト」divがあり、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

これが私のコードです

$('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 に答える
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 に答える