はてなブログで良かったカスタマイズ矢印でトップに戻る/記事内スムースクロール

IT技術やインターネット環境の事柄は、全然まったく分からない…。いつも、見てるばかりや検索とかばかりです。専門用語なんて、難しくて全く分かりません。

はてなブログに参加してみて、参考になったウェブページ、良かったなぁと思った事柄載せてみます。
「へぇ～すごい」そういう事もできるのかぁ…。と何を見ても驚く事ばかりです…。
実際に、同じように真似して、必要な部分を貼り付けて簡単に表示できました。

「矢印ボタン」設置で「ページのトップへ戻る/上に戻る」動作。スムーススクロールで動作。
目次インデックスページ内移動スムーススクロール

「矢印ボタン」設置で「ページのトップへ戻る/上に戻る」動作。スムーススクロールで動作。

ページを読み進んでいくと、ぼわぁ～っと「矢印ボタン」が現れて、ボタンを押すとススス～っとページのトップに戻ってくギミックです。

色の変更や透明度の変更やスクロール速度とか…色々と変更できます。

すごく分かり易い方の記事を参考にして設置しました('ω')。
サイト記事内の「ステップ１ ⇒ ステップ２ ⇒ ステップ３」と丁寧に解説在りますのでとても分かり易いです。
サイト記事内の「補足説明」の辺りを、じっくりと何度も読み返すと、色変更や透明度、スクロール速度とか色々と解説してくれています。好みの数字に変えて好みな感じに変更できます。

「ステップ１作業」での２つの要素部分は、筆者は書き換えました。

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

目次インデックスページ内移動スムーススクロール

目次インデックスの項目をクリックをした時に、「見出し」へ移動するときに、瞬時に移動しますよね？これを、ススス～っとスクロールして移動してくれる作成です。
どこまで移動したのとかものすごくわかりやすいので真似してみました。
目次に「目次」の、題名が付きます。「background: 〇〇〇;」で、背景の色変更も可能です。
サイト記事内の「４.はてなの目次機能のカスタマイズを行う」内の「目次のカスタマイズ方法」に、作業手順が丁寧に解説してくれています。

参考にしたサイトの方のWEBページになります。