1

Проблему можно посмотреть наглядно на гиф:

введите сюда описание изображения

Как сделать автоматическую прокрутку скролла, при открытии блока? Т.е. я скрываю блок (здесь все хорошо). Но когда я нажимаю еще раз на эту же кнопку что бы обратно открыть блок, скролл автоматически не прокручивается. и Этот блок получается не видно. Как исправить?

Я уже перепробовал якоря и тому подобное, не получается...

2
  • 1
    разметку, для которой вы пытаетесь это сделать, вместе со скриптом - тут можно вставлять сниппеты прямо в вопрос.
    – user177221
    18 дек 2015 в 20:08
  • Верните все условия в скрипте в первоначальное состояние после повторного нажатия. У вас не все возвращается. 19 дек 2015 в 12:31

1 ответ 1

2

Посмотреть можно тут - jsfiddle.net

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>
  <style>
    #trigger,
    #trigger2 {
      position: fixed;
      width: 100%;
      background: #FFCECE;
      color: #555;
      font-size: 150%;
      cursor: pointer;
      text-align: center;
    }

    #trigger {
      top: 0px;
    }

    #trigger2 {
      bottom: 0px;
    }

    #block {
      display: none;
      padding: 10px;
      border: 3px solid #eee;
      text-align: center;
    }

  </style>

  <body>
    <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><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><br><br>

    <div id="trigger">Кнопка</div>

    <div id="block">
      <img src="http://www.fndvisions.org/img/cutecat.jpg" alt="Изображение">
    </div>

    <div id="trigger2">Кнопка 2</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><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><br><br>

    <script>
      $(document).ready(function() {
        /* Первый вариант. Выравнивание блока сверху. */
        var triggerButton = $('#trigger'); // Кнопка
        var block = $('#block'); // Блок 
        var blockPadding = 10; // Отсутп кона сверху стайта
        var scrollSpeed = 300; // Скорость прокрутки
        var slideSpeed = 300; // Скорость прокрутки

        triggerButton.click(function(event) {
          if (block.is(":hidden")) {
            block.slideDown(slideSpeed, function() {
              marginTop = block.offset().top - blockPadding;
              $('html,body').animate({
                scrollTop: marginTop
              }, scrollSpeed);
            });
          } else {
            block.slideUp(slideSpeed);
          }
        });

        /* Второй вариант. Выравнивание блока снизу. */
        triggerButton = $('#trigger2'); // Кнопка
        block = $('#block'); // Блок 
        blockPadding = 30; // Отсутп кона сверху стайта
        scrollSpeed = 300; // Скорость прокрутки
        slideSpeed = 300; // Скорость прокрутки

        triggerButton.click(function(event) {
          if (block.is(":hidden")) {
            block.slideDown(slideSpeed, function() {
              marginTop = $(document).height() - $(window).height() - block.offset().top + blockPadding;
              $('html,body').animate({
                scrollTop: marginTop
              }, scrollSpeed);
            });
          } else {
            block.slideUp(slideSpeed);
          }
        });
      });
    </script>
  </body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.