Question

我正在尝试构建一个单页的网站但是，我需要网站向下滚动，因为慢慢向下滚动。我需要使用特殊的标题或功能吗？谢谢！我目前的代码如下：

<section id="section01" style="width: 100%; height: 80%">
    <h1>Scroll Down Button #1</h1>
    <a href="#section02">Scroll</a>
</section>
<section id="section02" style="width: 100%; height: 100%">
    <h1>Scroll Down Button #2</h1>
    <a href="#section01">Scroll</a>
</section>

Answer 1

jQuery animate()对此很好。下面的代码段：

＆＃13;

apples
oranges
peaches
[empty line]

＆＃13;

apples
oranges
peaches

＆＃13;

Answer 2

您可以使用一个小的jquery片段在您的内页链接中顺畅滚动。在内部滚动时使用animate。

$(function() {
  $('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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="section01" style="width: 100%; height: 80%">
  <h1>Scroll Down Button #1</h1>

  <a href="#section02">Scroll</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ornare risus, et pretium nisi. Fusce justo lectus, pharetra eget pellentesque sed, blandit quis mi. Praesent scelerisque mollis interdum. Nunc et eleifend lacus. Nam nunc risus, hendrerit
    in tempor sed, fermentum id mauris. Quisque lacus libero, auctor ac libero vitae, auctor faucibus nunc. Aliquam vitae orci non tellus rutrum varius. Praesent facilisis egestas lectus vestibulum tristique. Fusce eleifend libero nec justo pretium mollis.
    Duis eu finibus erat, eget ornare velit. Sed mattis interdum elit eu auctor. Vestibulum sagittis malesuada arcu elementum maximus. Mauris tristique, leo varius rhoncus consectetur, arcu diam faucibus nisl, lobortis dapibus diam elit at orci. In fermentum
    est odio, ut accumsan est aliquam at. Nunc rutrum mi et sem sagittis lobortis. Nulla ac velit at libero ultrices placerat vitae eu mi. Nullam nec pharetra elit. Pellentesque magna metus, lacinia vitae sapien at, tempor tempus erat. In pulvinar elit
    eu justo suscipit, ac vestibulum lorem scelerisque. Aliquam laoreet at augue at faucibus. Proin libero urna, pellentesque ac varius nec, vulputate sollicitudin ipsum. Maecenas et nibh a orci porttitor faucibus id quis tortor. Donec faucibus leo tellus,
    eget lacinia justo hendrerit in. Etiam egestas orci ut nulla fringilla vulputate. Donec id nunc ut lacus ornare dapibus. Integer rhoncus arcu ac maximus rutrum. Duis sed dui sed mauris accumsan ultricies. Aliquam hendrerit lorem ac mauris tristique
    tincidunt. Phasellus pulvinar nibh a augue pellentesque, in interdum elit ultricies. Donec aliquet elit a aliquam eleifend. Suspendisse a sodales neque, sed tempor mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
    egestas. Aliquam et porta neque, quis vulputate quam. Phasellus placerat accumsan diam, sit amet mollis quam rhoncus sit amet. Donec vel dui leo. Ut feugiat enim metus, sit amet ullamcorper quam feugiat ut. Aliquam euismod mauris porttitor turpis
    commodo, at pharetra odio imperdiet. Vivamus cursus semper lobortis. Cras non ipsum luctus ligula venenatis feugiat egestas vitae metus. Morbi dignissim hendrerit maximus. Maecenas diam eros, pharetra ut tristique quis, vulputate nec lectus. Curabitur
    euismod aliquet nulla, et eleifend est semper ac. Pellentesque hendrerit mollis lectus, sed condimentum quam tempus non. Mauris efficitur arcu a nisl consequat scelerisque. Nulla facilisi. Proin bibendum placerat finibus. Integer gravida magna vitae
    tincidunt facilisis. Donec ac lorem metus. Sed eros diam, blandit sed malesuada vel, aliquam at velit. Ut risus quam, maximus id quam ut, dictum posuere est. Nunc vitae suscipit neque. Sed elit urna, sodales eget nisi porta, convallis ullamcorper
    nibh. Praesent maximus, elit id ullamcorper posuere, felis leo bibendum nibh, eget placerat neque tellus nec erat. Sed porttitor augue nec ex mattis tincidunt. Nunc consectetur imperdiet ligula eu dapibus. Morbi gravida lacus ut lobortis vulputate.
    Aliquam ut interdum turpis. Vestibulum sit amet augue gravida tortor ultrices commodo. Aliquam mauris nisi, egestas vitae leo tincidunt, tempor efficitur risus. Donec tortor lorem, congue in nunc vitae, lacinia fringilla mi. Pellentesque finibus nibh
    vitae facilisis suscipit. Duis lobortis mollis purus vel vehicula. Etiam tristique mi mi, ut luctus tellus semper sed. Duis aliquam nibh nec dapibus facilisis. Morbi ultricies faucibus quam, facilisis tincidunt mi consectetur quis. Proin pharetra
    risus maximus eros imperdiet posuere. Donec pharetra lorem at dui tempor, vitae tempor diam aliquet.</p>
</section>
<section id="section02" style="width: 100%; height: 100%">
  <h1>Scroll Down Button #2</h1>
  <a href="#section01">Scroll</a>
</section>

向下滚动平滑

2 个答案: