CSSだけでも実装できる！ページ内アンカーやページ上部にアニメーションでスクロールさせるCSS, JavaScriptのまとめ
Post on:2018年5月10日
sponsors
ページ内のアンカーやページの上部にアニメーションで、スムーズにスクロールさせるCSS、単体のJavaScript、Vue.jsやjQueryのプラグインを紹介します。
現在では、CSSだけでも実装できるようになりました。IEは例のごとく非対応ですが、ポリフィルがあるので利用できます。
イラスト: Girls Design Materials
CSSでページをアニメーションでスクロールさせる
CSSのプロパティ「Scroll-behavior」を使用すると、アニメーションを使用してスムーズにスクロールさせることができます。
Scroll-behaviorのサポートブラウザ
scroll-behavior -MDN web doc
scroll-behaviorの実装例（チェックボックスをオンで）
2018年現在、対応ブラウザはChrome, Firefoxのみですが、ポリフィルも用意されているのでIEなどで使用することも可能です。
Scroll-behaviorプロパティの値
値にはキーワードを指定します。
「auto」は通常のスクロール、「smooth」はスムーズにスクロール。
|
1 2 |
scroll-behavior: auto; scroll-behavior: smooth; |
実装方法
|
1 2 3 4 5 6 7 8 9 10 |
<nav> <a href="#section1">1</a> <a href="#section2">2</a> <a href="#section3">3</a> </nav> <main class="scroll-container"> <section id="section1">1</section> <section id="section2">2</section> <section id="section3">3</section> </main> |
アンカー先に「scroll-behavior: smooth;」を適用します。
|
1 2 3 |
.scroll-container { scroll-behavior: smooth; } |
Smooth Scroll behavior polyfill
Smooth Scroll behavior polyfill -GitHub
デモページ
CSSのプロパティ「Scroll-behavior」のポリフィル。
ネイティブでサポートされているChrome, Safari、サポート外のIE9+, Edge12+, Safari6+, Operaで動作します。
実装方法
当スクリプトを外部ファイルとして記述し、トップに戻るリンクやスクロールさせる要素を配置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> </head> <body> <!-- コンテンツ --> <button>ページの先頭に戻る</button> <script src="smoothscroll.js"></script> <script> window.addEventListener('load', function() { document.querySelector('.js-scroll-to-top').addEventListener('click', function(e) { e.preventDefault(); document.querySelector('header').scrollIntoView({ behavior: 'smooth' }); }); }); </script> </body> </html> |
ページの最下部、何px移動、指定要素に移動なども定義できます。
JavaScript単体でページをアニメーションでスクロールさせる
Simple Scroll Up
Simple Scroll Up -GitHub
デモページ
単体で動作するスクリプト。ページの先頭に戻るときにスクロールをアニメーションさせます。
実装方法
当スクリプトを外部ファイルとして記述し、ページの先頭に戻るリンクを配置します。
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <head> <body> <!-- コンテンツ --> <a href="#up">ページの先頭に戻る</a> <script src="simplescrollup.js"></script> </body> </html> |
オプション
オプションではアニメーションの種類（easing）や持続時間（duraction）、ボタンが表示される上端からの距離（height-hide）を定義できます。
|
1 |
<a href="#up" duraction="1000" height-hide="100" easing="easeInOutQuad" class="simplescrollup__button simplescrollup__button--hide">Your text</a> |
単体で動作するスクリプト。ページ内アンカー・ページの先頭に戻るときにスクロールをアニメーションさせます。アンカーは、2バイト文字にも対応。
実装方法
当スクリプトを外部ファイルとして記述し、ページ内アンカー・ページの先頭に戻るリンクを配置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> </head> <body> <!-- コンテンツ --> <a data-scroll href="#anchor1">アンカーリンク</a> ... <div id="anchor1">アンカー</div> <a href="#">ページの先頭に戻る</a> <script src="smooth-scroll.js"></script> <script> var scroll = new SmoothScroll('a[href*="#"]'); </script> </body> </html> |
オプション
オプションではアニメーションの種類を変更したり、固定ヘッダに対応させることも可能です。
|
1 2 3 |
<a data-easing="easeInQuad" href="#anchor1">Ease-In</a> <a data-easing="easeInOutQuad" href="#anchor1">Ease-In-Out</a> <a data-easing="easeOutQuad" href="#anchor1">Ease-Out</a> |
単体で動作するスクリプト。
ver.1ではjQueryのプラグインでしたが、先日リリースされたver.2からjQueryは不要になりました。
実装方法
当スクリプトを外部ファイルとして記述し、ページの先頭に戻るリンクを自動で配置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head> </head> <body> <!-- コンテンツ --> <script src="dyscrollup.min.js"></script> <script> dyscrollup.init(); </script> </body> </html> |
オプション
オプションではアニメーションやリンクのデザインを変更できます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> dyscrollup.init({ showafter : 600, scrolldelay : 500, position : "left", image : "dist/image/32.png", shape : "other", width : 30, height : 30 }); </script> |
プラグインでページをアニメーションでスクロールさせる
Vue Backtotop Component -GitHub
デモページ
Vue.jsのコンポーネント。クリックするとページの上部にスクロールされます。
実装方法
npmでインストールします。
|
1 |
npm install vue-backtotop --save |
vue-backtotopのコンポーネントに独自のHTMLを記述することができます。
|
1 2 3 |
<back-to-top bottom="50px" right="50px"> <button type="button" class="btn btn-info btn-to-top"><i class="fa fa-chevron-up"></i></button> </back-to-top> |
Material ScrollTop Button
Material ScrollTop Button -GitHub
デモページ
jQuery 1.7+のプラグイン。Material Designで見かけるページをスクロールすると、右下にボタンが表示され、クリックで上部にスクロールします。
実装方法
当スクリプトを外部ファイルとして記述し、ページの先頭に戻るリンクを配置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<html> <head> <link rel="stylesheet" href="css/material-scrolltop.css"> </head> <body> <!-- コンテンツ --> <button class="material-scrolltop" type="button"></button> <script src="jquery.min.js"></script> <script src="material-scrolltop.js"></script> <script> $('body').materialScrollTop(); </script> </body> </html> |
オプション
オプションではアニメーションやリンクのデザインを変更できます。
|
1 2 3 4 5 6 7 8 9 10 |
$('body').materialScrollTop({ padding: 100, revealElement: 'header', revealPosition: 'bottom', duration: 600, easing: 'swing', onScrollEnd: function() { console.log('This is the end, my only friend, the end...'); } }); |
ScrollUp
ScrollUp -GitHub
デモページ
jQueryのプラグイン。ページをスクロールすると、右下にボタンが表示され、クリックで上部にスクロールします。
実装方法
当スクリプトを外部ファイルとして記述し、ページの先頭に戻るリンクを自動で配置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> </head> <body> <!-- コンテンツ --> <script src="jquery-1.9.1.min.js"></script> <script src="jquery.scrollUp.min.js"></script> <script> $(function () { $.scrollUp(); }); </script> </body> </html> |
オプション
オプションではアニメーションやリンクのデザインを変更できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function () { $.scrollUp({ scrollName: 'scrollUp', // Element ID scrollDistance: 300, // Distance from top/bottom before showing element (px) scrollFrom: 'top', // 'top' or 'bottom' scrollSpeed: 300, // Speed back to top (ms) easingType: 'linear', // Scroll to top easing (see http://easings.net/) animation: 'fade', // Fade, slide, none animationSpeed: 200, // Animation speed (ms) scrollTrigger: false, // Set a custom triggering element. Can be an HTML string or jQuery object scrollTarget: false, // Set a custom target element for scrolling to. Can be element or number scrollText: 'Scroll to top', // Text for element, can contain HTML scrollTitle: false, // Set a custom <a> title if required. scrollImg: false, // Set true to use image activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF' zIndex: 2147483647 // Z-Index for the overlay }); }); |
sponsors
