Question

我正在尝试的是通过单击按钮它将平滑地滚动到下一部分，而不更改背景图像。与此相似; http://www.dada-data.net/en/

我已经能够制作一个滚动到新页面的点击事件，但似乎无法让这些部分在同一背景上向上滚动。

提前感谢您的帮助！

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代码。

平滑滚动到

3 个答案: