【JavaScript】スムーススクロールをjQueryを使わずにシンプルに実装する【Vanilla JS】

以前「ページ内リンクのスムーススクロールのベスト(2017年9月現在)な実装を考える」という記事を書いたのですが、 この記事の中では当たり前のようにjQueryを使用していました。 アニメーションさせるならjQueryを使った方が楽、という思い込みから、jQueryを使わないという事を検討すらしていませんでした。 しかし改めて考えてみると、徐々に古いIEに対応しなくて良くなってきた昨今、最近のJavaScriptの便利なメソッドも使えるようになってきているので、実はプレーンなJavaScriptでもシンプルに実装できるんじゃないかと思い、色々と試してみました。 やはりjQueryは便利に作られているなと実感しつつも、機能を絞ればプレーンなJavaScriptでもまあまあシンプルに書ける事がわかりましたので、紹介したいと思います。 IE10以下の動作確認はしていません。

Fatal error: Uncaught Error: Call to a member function id() on array in /home/web-rice/www/noze.space/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php:36 Stack trace: #0 /home/web-rice/www/noze.space/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(538): CrayonFormatter::format_code('', Array, Object(CrayonHighlighter)) #1 [internal function]: CrayonFormatter::delim_to_internal(Array) #2 /home/web-rice/www/noze.space/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(516): preg_replace_callback('#()#msi', 'CrayonFormatter...', 'var scrollElm =...') #3 /home/web-rice/www/noze.space/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(166): CrayonFormatter::format_mixed_code('var scrollElm =...', Object(CrayonLang), Object(CrayonHighlighter)) #4 /home/web-rice/www/noze.space/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(186): CrayonHighlighter->process() #5 /home/web-rice/www/noze.space/wp/wp-co in /home/web-rice/www/noze.space/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 36