<a href="#section2" class="scroll-link">Go to Section 2</a>

<div id="section2" style="margin-top: 500px;">
  <h3>Section 2</h3>
</div>

<script>
$(document).ready(function(){
  $('.scroll-link').on('click', function(e){
    e.preventDefault();
    const target = $($(this).attr('href'));
    $('html, body').animate({
      scrollTop: target.offset().top
    }, 800);
  });
});
</script>

<div class="accordion">
  <h3 class="accordion-header">Toggle Section</h3>
  <div class="accordion-content" style="display: none;">
    <p>This is hidden content shown on click.</p>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.accordion-header').click(function(){
    $(this).next('.accordion-content').slideToggle();
  });
});
</script>

<button id="openModal">Open Modal</button>

<div id="myModal" style="display:none; position: fixed; top: 30%; left: 50%; transform: translateX(-50%); background: #fff; padding: 20px; border: 1px solid #ccc;">
  <p>This is a modal box.</p>
  <button id="closeModal">Close</button>
</div>

<script>
$(document).ready(function(){
  $('#openModal').click(function(){
    $('#myModal').fadeIn();
  });
  $('#closeModal').click(function(){
    $('#myModal').fadeOut();
  });
});
</script>

<div class="scroll-box" style="margin-top: 500px; display: none;">
  <p>You scrolled to me!</p>
</div>

<script>
$(document).ready(function(){
  $(window).on('scroll', function(){
    $('.scroll-box').each(function(){
      if ($(this).offset().top <= $(window).scrollTop() + $(window).height() - 100) {
        $(this).fadeIn(1000);
      }
    });
  });
});
</script>