on:2018年5月10日sponsorsページ内のアンカーやページの上部にアニメーションで、スムーズにスクロールさせるCSS、単体のJavaScript、Vue.jsやjQueryのプラグインを紹介します。現在では、CSSだけでも実装できるようになりました。IEは例のごとく非対応ですが、ポリフィルがあるので利用できます。MaterialsCSSでページをアニメーションでスクロールさせるJavaScript単体でページをアニメーションでスクロールさせるプラグインでページをアニメーションでスクロールさせるCSSでページをアニメーションでスクロールさせるCSSのプロパティ「Scroll-behavior」を使用すると、アニメーションを使用してスムーズにスクロールさせることができます。Firefoxのみですが、ポリフィルも用意されているのでIEなどで使用することも可能です。値にはキーワードを指定します。「auto」は通常のスクロール、「smooth」はスムーズにスクロール。smooth;」を適用します。-GitHubデモページCSSのプロパティ「Scroll-behavior」のポリフィル。Operaで動作します。当スクリプトを外部ファイルとして記述し、トップに戻るリンクやスクロールさせる要素を配置します。});});});</script></body></html>ページの最下部、何px移動、指定要素に移動なども定義できます。-GitHubデモページ単体で動作するスクリプト。ページの先頭に戻るときにスクロールをアニメーションさせます。当スクリプトを外部ファイルとして記述し、ページの先頭に戻るリンクを配置します。src="simplescrollup.js"></script></body></html>オプションオプションではアニメーションの種類(easing)や持続時間(duraction)、ボタンが表示される上端からの距離(height-hide)を定義できます。-GitHubデモページ単体で動作するスクリプト。ページ内アンカー・ページの先頭に戻るときにスクロールをアニメーションさせます。スクリプトを外部ファイルとして記述し、ページ内アンカー・ページの先頭に戻るリンクを配置します。SmoothScroll('a[href*="#"]');</script></body></html>オプションオプションではアニメーションの種類を変更したり、固定ヘッダに対応させることも可能です。-GitHub単体で動作するスクリプト。ver.1ではjQueryのプラグインでしたが、先日リリースされたver.2からjQueryは不要になりました。当スクリプトを外部ファイルとして記述し、ページの先頭に戻るリンクを自動で配置します。src="dyscrollup.min.js"></script><script>dyscrollup.init();</script></body></html>オプションオプションではアニメーションやリンクのデザインを変更できます。-GitHubデモページVue.jsのコンポーネント。クリックするとページの上部にスクロールされます。実装方法npmでインストールします。--savevue-backtotopのコンポーネントに独自のHTMLを記述することができます。1.7+のプラグイン。Designで見かけるページをスクロールすると、右下にボタンが表示され、クリックで上部にスクロールします。当スクリプトを外部ファイルとして記述し、ページの先頭に戻るリンクを配置します。src="material-scrolltop.js"></script><script>$('body').materialScrollTop();</script></body></html>オプションオプションではアニメーションやリンクのデザインを変更できます。-GitHubデモページjQueryのプラグイン。ページをスクロールすると、右下にボタンが表示され、クリックで上部にスクロールします。当スクリプトを外部ファイルとして記述し、ページの先頭に戻るリンクを自動で配置します。{$.scrollUp();});</script></body></html>オプションオプションではアニメーションやリンクのデザインを変更できます。