Question

我正在尝试创建一个函数，它会在点击时淡入MyManagerList[2]，而不应该移动到div。但它不起作用，首先出现div，我必须再次点击一次移动到那里。有人可以帮帮我吗？ https://jsfiddle.net/qzdxf478/

div

Answer 1

使用e.preventDefault();阻止您点击的锚点的默认操作。不要忘记包含jQuery库。运行下面的代码段以查看其实际效果：

$(document).ready(function() {
  $('.showDetail').click(function(e) {
    e.preventDefault();
    $('#princip-detail').fadeIn();
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

#principy {
  width: 100%;
  height: auto;
  min-height: 100%;
  background: url('main-bg.jpg') no-repeat center center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 20;
}

#princip-detail {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  height: auto;
  min-height: 100%;
  background: #f00 url("page-bg.jpg") no-repeat center center;
  overflow: hidden;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="principy">
  <div class="princip-topleft">
    <h2><a href="#princip-detail" class="showDetail">Continue</a></h2>
  </div>

</div>

<div id="princip-detail">

</div>

Answer 2

<div id="principy">
  <div class="princip-topleft">
    <h2><a href="#princip-detail" class="showDetail">Continue</a></h2></div>

</div>

<div id="princip-detail">
  133131321212121323232323
</div>

#principy {
  width: 100%;
  height: auto;
  min-height: 100%;
  background: url('main-bg.jpg') no-repeat center center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 20;
}

#princip-detail {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  height: auto;
  min-height: 100%;
  background: url("page-bg.jpg") no-repeat center center;
  overflow: hidden;
  display: none;
}

   $(document).ready(function() {
              $('.showDetail').click(function() {
                var curLink = this.hash;
                $(curLink).fadeIn(1000, function() {
                  var offset = $(curLink).offset().top;
                  $('html,body').animate({
                    scrollTop: offset
                  }, 1000);

                });
              });
            });

Fiddler https://jsfiddle.net/5xj5Lg53/

jQuery fadeIn而不是移动到div

2 个答案: