平滑滚动到

Question

what I'm trying to is by clicking a button it will scroll smoothly down to the next section, without changing the background image. Similar to this; http://www.dada-data.net/en/

I've been able to make a click event that scrolls to a new page, but can't seem to get the sections to scroll up on the same background.

Thanks in advance for any help!

HTML

<section id="section01" class="demo">

  <div class="hero">
    <img src="/Users/jbeez/desktop/portfolio/JMB_B.png" class="jmb">
  </div>

  <a href="section02"><span></span>Click</a>

</section>

<!-- end of section 1 -->

<section id="section02" class="demo">
  <div>
    <h1>Hello world</h1>
  </div>
</section>

JAVASCRIPT

$(function() {
  $('a[href*=#]').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
  });
});

CSS

 #section01 { background: url(/Users/jbeez/desktop/portfolio/background.png) center center / cover no-repeat;}
    #section02 { background: url(/Users/jbeez/desktop/portfolio/background.png) center center / cover no-repeat;}
    #section03 { background: url(/Users/jbeez/desktop/portfolio/background.png) center center / cover no-repeat;}

.demo a {
      position: absolute;
      bottom: 20px;
      left: 50%;
      z-index: 2;
      display: inline-block;
      -webkit-transform: translate(0, -50%);
      transform: translate(0, -50%);
      color: #fff;
      font : normal 400 20px/1 'Josefin Sans', sans-serif;
      letter-spacing: .1em;
      text-decoration: none;
      transition: opacity .3s;
    }
    .demo a:hover {
      opacity: .5;
    }

    #section01 a {
      padding-top: 60px;
    }
    #section01 a span {
      position: absolute;
      top: 0;
      left: 50%;
      width: 24px;
      height: 24px;
      margin-left: -12px;
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      box-sizing: border-box;
    }



    #section02 a {
      padding-top: 60px;
    }
    #section02 a span {
      position: absolute;
      top: 0;
      left: 50%;
      width: 46px;
      height: 46px;
      margin-left: -23px;
      border: 1px solid #fff;
      border-radius: 100%;
      box-sizing: border-box;
    }
    #section02 a span::after {
      position: absolute;
      top: 50%;
      left: 50%;
      content: '';
      width: 16px;
      height: 16px;
      margin: -12px 0 0 -8px;
      border-left: 1px solid #fff;
      border-bottom: 1px solid #fff;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      box-sizing: border-box;
    }

Answer 1

Try to change your href, like this :

<a href="#section02"><span></span>Click</a>

$(".your element").click(function() {
    $('html, body').animate({
        scrollTop: $(this).attr("href").offset().top
    }, 2000);
});

Answer 2

尝试使用哈希：

  <a href="#section02"><span></span>Click</a>

Answer 3

Like the others are saying... The # is terribly missing.

<a href="#section02"><span></span>Click</a>

Then, in the attribute selector you used, there is some quotes missing around this # you're trying to target.

$("a[href*='#']")

CodePen of the code fixed.