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

<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 2

这应该做你想要的。动画滚动已从以下内容中删除：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 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

按钮fadeOut并滚动到id

4 个答案: