主页 / 问题 / 809885
Accepted
Алексей Соколов
Asked:2020-04-05 16:42:15 +0000 UTC2020-04-05 16:42:15 +0000 UTC

打开扰流板时滚动

  • 772

我在页面上做了一个扰流板，当你从扰流板打开附加文本时，它是不可见的，它根本不适合屏幕，是否可以做一些事情，以便在打开扰流板时自动滚动到开场白

$(document).ready(function() {

  $('.spoiler_links').each(function() {

   $(this).click(function(e) {
      e.preventDefault(); //отменяем стандартное действие ссылки
      $('.spoiler_body').not($(this).next()).each(function() {
        $(this).hide();
      });

      $(this).next('.spoiler_body').fadeToggle(500);
    });
  });
}); 
.spoiler-wrap{
  margin: 0 0 8px;}

.spoiler-head{
  cursor: pointer;
  padding: 5px;}

.spoiler-wrap .disabled .spoiler-body{
    display: none;}
    
a.s2-item.spoiler_links {
  margin: 30px 0 18px;}
  
.spoiler_body {
  display:none;
  margin-top: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="all">
<div class="spoiler-wrap disabled">


  <a href="#w" class="month spoiler_links">
    <div class="number r1">
      <div class="number2">
        <b>1</b>
        <p>месяц</p>
      </div>
    </div>
    <div class="transit t1">
      <img src="img/arrow-long.png" alt="">
    </div>
  </a>

<div class="spoiler-body spoiler_body">
  <div class="spoiler-body2 spoiler_body2">
    <p class="choice">ваш выбор</p>
    <div class="number">
      <div class="number2">
        <b>1месяц</b>
      </div>
    </div>
  </div>
</div>

</div>


<div class="spoiler-wrap disabled">

<a href="#w" class="month spoiler_links">
  <div class="number">
    <div class="number2">
      <b>3</b>
      <p>месяца</p>
    </div>
  </div>
  <div class="transit t2">
    <img src="img/arrow-long.png" alt="">
  </div>
</a>

<div class="spoiler-body spoiler_body">
  <div class="spoiler-body2 spoiler_body2">
    <p class="choice">ваш выбор</p>
    <div class="number">
      <div class="number2">
        <b>3месяца</b>
      </div>
    </div>
  </div>
</div>

</div>
</div>

javascript

1 个回答

  1. Best Answer

    你可以这样做：

     $(document).ready(function () {

    $('.spoiler_links').each(function () {

            $(this).click(function (e) {
                    e.preventDefault(); //отменяем стандартное действие ссылки
                    $('.spoiler_body').not($(this).next()).each(function () {
                        $(this).hide();
                    });

                    $(this).next('.spoiler_body').fadeToggle(500);

                    if ($(this).next('.spoiler_body').is(':visible')) {
                        $('html, body').animate({
                            scrollTop: $(this).next('.spoiler_body').offset().top
                        }, 1000);

                    }


            });
    });
});
    • 1

相关问题