Question

当单击按钮然后滚动到该按钮时，是否可以显示div？我正在使用以下代码。它显示了div，但是我必须再次单击该按钮才能滚动到div。有没有办法让按钮单击两次？

$(document).ready(function(){
  $("div#home-btn-1").on('click', function () {

     $('div.hide-section-mobile').addClass("show");
      $('#home-btn-1').scrollTo('#funnel-1-mobile');
  });
});

Answer 1

尝试一下

$(document).ready(function(){ 
    $("div#home-btn-1").on('click', function () { 
        $('div.hide-section-mobile').addClass("show").scrollIntoView();
    }); 
});

Answer 2

使用location.hash = "elementID";

替换$('#home-btn-1').scrollTo('#funnel-1-mobile');

使用location.hash = 'funnel-1-mobile';

这里是一个示例：http://jsfiddle.net/43Ls1tnd/7/

Answer 3

只需在click事件中检查一下是否显示了该类，即可扩展您的逻辑。如果滚动到它，我修改了我的代码以在以下示例中工作：

$("#home-btn").on('click', function() {
  $('#funnel-1-mobile').hasClass("show") ? console.log('Adding') : $('#funnel-1-mobile').addClass("show");
  $(window).scrollTop(1500);
});

div {
  background-color: lime;
  width: 500px;
  height: 100px;
  margin: 10px;
}

#funnel-1-mobile {
  background-color: indigo;
  color: white;
  display: none;
}

.show {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='home-btn'>Click to scroll</button>
<div></div>
<div></div>
<div></div>

<div id='funnel-1-mobile'>I scrolled!</div>

单击按钮然后滚动到它时如何显示div？

3 个答案: