平滑滾動到

Question

我要嘗試的是單擊一個按鈕，它可以平滑地向下滾動到下一部分，而無需更改背景圖像。 與此類似； http://www.dada-data.net/en/

我已經能夠創建一個可滾動到新頁面的click事件，但是似乎無法使這些部分在同一背景上向上滾動。

在此先感謝您的幫助！

的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

嘗試更改您的href，如下所示：

<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

就像其他人在說... #嚴重缺失。

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

然后，在您使用的屬性選擇器中，您試圖定位的#周圍缺少一些引號。

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

固定代碼的CodePen 。