使按钮fadeOut并滚动到id

Question

我想知道如何使按钮与标题一起消失，同样的按钮将页面滚动到“关于”部分。目前，标题和按钮都将淡出点击，但滚动不工作。我会用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-技巧:平滑滚动

<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);
        });
    });
});

工作示例：淡出标题，按钮和滚动到分区