Сделать кнопку fadeOut и прокрутить до id

Question

Мне было интересно, как заставить кнопку исчезнуть вместе с заголовком, с той же кнопкой, прокручивающей страницу до раздела «about». В настоящее время и заголовок, и кнопка будут исчезать при нажатии, но свиток не работает. Могу ли я использовать href? Как я могу называть это в js, а также исчезать?

Заранее благодарен!

Вот соответствующий код:

<h2 class="frame-4">Now!</h2> 
<button href="javascript:jumpScroll()" class="btn">Join</button> 


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $(".btn").click(function(){ 
     $("h2").fadeOut() 
     $("button").fadeOut() 
     }); 
    }); 
    </script> 
    <script> 
     function jumpScroll() { 
      window.scroll(0,900); 
     } 
    </script> 


<section id="about" class="container content-section text-center"> 
    <div class="row"> 
     <div class="col-lg-8 col-lg-offset-2"> 
      <h2></h2> 
      <p></p> 

     </div> 
    </div> 
</section> 

Answer 1

Это должно делать то, что вы хотите. Анимированный скроллинг был сорван из следующих функций: CSS-Tricks: Smooth Scrolling

<nav class="btn-parent"> 
    <h2 class="frame-4">Now!</h2> 
    <a href="#about" class="btn">Join</a> 
</nav> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
     $(".btn").click(function(){ 
      $(".btn-parent").animate({opacity: 0}); 
     }); 

     $('a[href*=#]:not([href=#])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
       $('html,body').animate({ 
       scrollTop: target.offset().top 
       }, 1000); 
       return false; 
      } 
      } 
     }); 
     }); 
    </script> 

<section id="about" class="container content-section text-center"> 
    <h2>This is the about section</h2> 
    <p>Lorem ipsum</p> 
</section> 

Вы можете посмотреть демо здесь: http://codepen.io/btpoe/pen/setbF

Answer 2

<h2 class="frame-4 fade">Now!</h2> 
<button href="javascript:jumpScroll()" class="btn fade">Join</button> 


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

    <script> 
     function jumpScroll() { 
      $('.fade').fadeOut(); 
      window.scrollTo(0,900); 
     } 
    </script> 


<section id="about" class="container content-section text-center"> 
    <div class="row"> 
     <div class="col-lg-8 col-lg-offset-2"> 
      <h2></h2> 
      <p></p> 

     </div> 
    </div> 
</section> 

непроверенная, но если добавить класс элементов, а затем использовать JQuery в пределах вашей функции исчезать элементы, которые вы должны быть хорошо идти.

Answer 3

Вы уже используете JQuery, так что вы можете просто пойти с функциями JQuery для запуска события. Я также рекомендую использовать animate и scrollTop, чтобы сделать его более привлекательным:

$(document).ready(function(){ 
    $(".btn").click(function(){ 
     $(".frame-4, button").fadeOut('slow', function(){ 
      $("body, html").animate({ 
       scrollTop: $("#about").offset().top 
      }, 200); 
     }); 
    }); 
}); 

Рабочий пример: Fade Title, Button & Scroll to Div

Answer 4

его более простым при использовании location.hash

$(".btn").click(function(){ 
    $("h2").fadeOut() 
    $("button").fadeOut() 
    location.hash = '#about' 
}); 

JSfiddle