スムーススクロール

Question

私は1ページのウェブサイトを構築しようとしていますが、スクロールダウンのようにスムーズにスクロールするためのサイトが必要です。 特殊なヘッダーや関数を使用する必要がありますか？感謝！ ありがとう！ 私の現在のコードは次のようになります。

<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()。以下のスニペット：

// Select all links with hashes 
 
$('a[href*=#]:not([href=#])').click(function() { 
 
    // On-page links 
 
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || 
 
    location.hostname == this.hostname) { 
 
    // Figure out element to scroll to 
 
    var target = $(this.hash); 
 
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
 
    // Does a scroll target exist? if so, animate 
 
    if (target.length) { 
 
     $('html,body').animate({ 
 
     scrollTop: target.offset().top 
 
     }, 1000); 
 
     //Prevent default 
 
     return false; 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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 adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! lorem</p> 
 
</section> 
 
<section id="section02" style="width: 100%; height: 100%"> 
 
    <h1>Scroll Down Button #2</h1> 
 
    <a href="#section01">Scroll</a> 
 
</section>

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>