スキップしてメイン コンテンツに移動

投稿

ラベル(目次)が付いた投稿を表示しています

cssのscroll-behaviorのsmoothでページ内のスクロールイベントにゆっくり遅らせるアニメーションを付ける

イメージ
今までブログに目次のジャンプリンクやフローティングの戻るボタンを設置して来た。htmlのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰囲気が殆ど変わらないために自分はどこにいるのか、リンクを使ってページ内を本当に移動したのかどうかが分かり兼ねる。 少しでも混乱しないために、または折角と設置したはずの目次のジャンプリンクやフローティングの戻るボタンを気持ち良く使うというサイトのUX(User Experience/利用者の体験)を向上させるべく、ページ内を移動するスクロールイベントにゆっくり遅らせるアニメーションを付けるようにデザインを相応しく変えると良いと思う。cssのscroll-behaviorのsmoothの使い方 サイトのスクロールイベントの経…

サイトにジャンプリンク付きの目次を角丸の枠線や透過の背景色のデザインで設けるためにはどうするか

イメージ
インターネットでジャンプリンク付きの目次を設けたサイトをブログの記事などで良く見かけていた。
僕もブログに長文の記事を載せる際に見出しで細かく区切られているとそれぞれへ向けてジャンプリンク付きの目次を冒頭に設けておくのが素早く移動できて便利だし、訪問者にも好まれそうだとやってみたら気に入ってしまった。
コンテンツが上下に長いほどにジャンプリンク付きの目次がサイトに必要になって来る。

目次
ジャンプリンクのhtml枠線のデザインのcss枠線のcssのサンプルコード角丸のcssのサンプルコード背景色のデザインのcss背景色のCSSのサンプルコード透過のcssのサンプルコード目次の完成版のデザイン

ジャンプリンクのhtml
一つのページ内で移動するのも他のページへのリンクと同じで、リンクのaタグを使う。
リンク元のサンプルコード
<a href="#heading1">ジャンプ…