JSライブラリ不要！ページトップへ戻るスムーススクロールの最小構成
JSライブラリ不要！ページトップへ戻るスムーススクロールの最小構成 「スムーススクロールのライブラリは使いたくない」この要件に沿ったページトップへ戻るスムーススクロールの最小構成は、どの程度だろうか？ 昨今の縦長基調のデザイン構成において当然のように設置される「ページトップへ戻るボタン」であるが、スムーススクロールが実装されているサイトを多く見かける。ボタンをクリックすればページ上部まで、なめらかにスクロールする機能だ。 これを実現するには、JavaScript ライブラリを使うことが一般的だけれど、その導入ともなると労力を要する。できるならば可能な限りスケーリングしたい。 このエントリーでは、JavaScript ライブラリを使わないスムーススクロールの最小構成を紹介しよう。 これこそスムーススクロールの最小構成だ スムーススクロールの最小構成は、HTMLとCSSだけで機能する。あわせて
CSSのみでスムーススクロール実装とアンカーリンクのスクロール位置を調整する方法｜BLACKFLAG
ページ内でスムーススクロールをする際は今まではJavaScriptを使って実装をすることが多かったですが、最新のモダンブラウザではCSSだけで簡単に実装することができます。 それに加えて、アンカーリンクでスクロールする際に固定ヘッダーがあったりするとスクロールを止める位置の調整がめんどうだったりしますが、それも最新のモダンブラウザでは簡単にCSSで操作することができます。 今回はCSSだけでスムーススクロールを実装する方法と、アンカーリンクのスクロール位置を調整する方法を備忘録メモとして紹介してみます。 CSSのみでスムーススクロールを実装するには「scroll-behavior」プロパティの「smooth」を使用します。 ページ全体にスムーススクロールを実装する場合はhtmlタグに対して「scroll-behavior」プロパティを指定します。 html { scroll-behavio
もう読んでくれる人がいなくなって、話題にも、お金にもならない『ブログ』というもの - いつか電池がきれるまで
yutoma233.hatenablog.com 『おのにち』さんは「はてなブログ」を長い間書いておられる方で、僕とは直接の絡みはほとんどないものの、固定読者も大勢いて、マイペースで更新されているのだろうな、と思っていました。 別にブログをやめるとかそういう話じゃなくて、『はてなブログ』有料版の期限が切れたのを延長せずに無料版でやります、というだけの話ではあるのだけれど、最後のほうに、こんな文章があったのです。 最近は、昔感じていたブログへの熱意みたいなものが残念ながら薄れてきつつあるんですけど、それでもやっぱり書くことは楽しいし、同じブログ仲間だ！と親近感を抱いている人達もたくさんいるので、これからも細々と続けていけたらいいなぁと。 ああ、ブログへの熱意みたいなものが薄れてきているのは、僕だけじゃないんだな、と。 それは別に今にはじまったことではなくて、もう5年前くらいから、僕が書いてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IntersectionObserver and position:sticky