How do you make an automatic plug when the block opens?
-
The problem can be seen clearly in theif:
How do you make an automatic plug when the block opens? I'm covering the block. But when I press the same button again to open the block back, it's not automatic. And this block doesn't work. How do I fix it?
I've already tried anchors and stuff like that. ♪ ♪
-
I'll see you around here. https://jsfiddle.net/mvqvjbkq/1/
<!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>
