Question

我有一个非常简单的函数，即slideToggle（）一个隐藏的div并将div滚动到顶部。 slideToggle工作正常，滚动到顶部根本不起作用。

任何提示？我的想法是当scrollTo函数结束时，然后启动slideToggle one。

$(document).on("click", ".more-about", function() {
  $(this).parent().find('.hide').slideToggle(800),
    $(this).parent().find('.more').hide(),
    $('.whole').scrollTo('#about', 100)
});

.more-about {
  cursor: pointer
}

.hide {
  color: red;
  display: none
}

.whole {
  background: #f2f2f2
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="whole">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
  est laborum."<br><br>
  <div class="more-about">MORE</div>
  <div class="hide">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


</div>

Answer 1

更新：$（＆＃39; .whole＆＃39;）。scrollTop（＆＃39;＃about＆＃39;，100）

你的dom中没有#about。

＆＃13;

$(document).on("click", ".more-about", function() {
  $(this).parent().find('.hide').slideToggle(800),
    $(this).parent().find('.more').hide(),
    $('.whole').scrollTop('#about', 100)
});

＆＃13;

.more-about {
  cursor: pointer
}

.hide {
  color: red;
  display: none
}

.whole {
  background: #f2f2f2
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="whole">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
  est laborum."<br><br>
  <div class="more-about">MORE</div>
  <div class="hide">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


</div>

＆＃13;

Answer 2

我相信你想在点击更多内容时显示隐藏的内容并滚动到新内容的位置，这里是bin - http://jsbin.com/wigojowabu/edit?html,js,console,output

$(document).on("click", ".more-about", function() {
  $(this).parent().find('.hide').slideToggle(800);
    $(this).hide();
    window.scrollTo(0,$('#about').offset().top);
});

我使用window.scrollTo（xpos，ypos）滚动到元素。

Answer 3

您可以在内部使用animate()和scrollTop进行自动滚动。请试试以下：

$(document).on("click", ".more-about", function() {
  $(this).parent().find('.hide').slideToggle(800)
    $(this).parent().find('.more').hide()
    $('html').animate( { scrollTop: ($(".whole").scrollTop()+$(".more-about").offset().top) }, 1000 );
});

.more-about {
  cursor: pointer
}

.hide {
  color: red;
  display: none
}

.whole {
  background: #f2f2f2
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="whole">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
  est laborum."<br><br>
  <div class="more-about">MORE</div>
  <div class="hide">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


</div>

onclick slideToggle + scrollTo DIV

3 个答案: