Jquery slideUp 하단 페이지

Question

아코디언에 문제가 있습니다. 사용자가 내 페이지의 맨 아래에 위치 할 수있는 위치가 있으며 콘텐츠를 굴립니다. 내 문제는 : 모든 것이 올바르게 작동하지만 롤백 된 내용을 보려면 수동으로 스크롤해야합니다. 나는 무엇을 해야할지 모른다. 나는 slideUp 대신에 토글을 시도하고, "push"div를 만든다.하지만 괜찮은 것은 아니다.

아래 코드를 참조하십시오.

$(document).ready(function() { 
 
    $('.accordeon').hide(); // hide the content of .accordeon 
 
    $('h4').click(function() { // when clic on h4 
 
    $(this).next('div:hidden').slideDown() // roll the div 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p> 
 
\t 
 
\t \t \t \t \t 
 
<h4>CLIC HERE</h4> 
 
<div class="accordeon"> 
 
\t <img src="http://2.bp.blogspot.com/-ot4eLEDWAjs/Uk9fzDJlQCI/AAAAAAAAKsU/UfUhYvEvAz4/s1600/Recherche-image-b%C3%A9b%C3%A9-80.jpg" alt="Metz" width="300" height="225" /> 
 
</div>

링크에 대한 페이지의 하단, 카릭으로 이동하고 숨기기 컨텐츠를 볼 수있는 스크롤이 있는지를 알 수 있습니다. 이 작업을 자동으로 수행하는 방법은 무엇입니까?

가장 좋은 해결책은 "내 div에서 clic 할 때 페이지의 위치를 ​​바꿀 때"라고 생각하지만 어떻게되는지 잘 모릅니다.

아무도 이미이 문제가 있습니까?

많은 분들께 감사드립니다.

Answer 1

슬라이드 기능을 수행 한 후 요소의 맨 위로 스크롤되도록 페이지를 만듭니다. 이것을보십시오 :

$(document).ready(function() { 
     $('.accordeon').hide(); // hide the content of .accordeon 
     $('h4').click(function() { // when clic on h4 
      $(".accordeon").slideToggle(function() { 
       $('html, body').animate({ 
        scrollTop: $(this).offset().top 
       }, 500); 
      }); 
     }); 
    }); 

Answer 2

id를 div에 연결하면 JQuery를 사용하여 스크롤 할 수 있습니다.

Click here 피터 에이 타이 (Peter Ajtai)의 답을 더 배우기.