VIVABlogコンテンツへスキップVIVABlogWordPressやMovableTypeのカスタマイズやWebサイトの制作・運営に役立つ情報など。adblockが有効になっています。Awesomeで作った「トップに戻る」ボタンの簡単な導入方法2016年4月4日Webページのナビゲーションとして、そこかしこで見掛けるようになった「トップページへ戻る」ボタン。ページを下にスクロールさせるとぼわ〜ん出現して、クリック(タップ)するとぐい〜〜ん!と上に戻るというやつです。Awesome、出現とクリック時のエフェクト動作はjQueryを使っているだけなので、様々なブログやWebサイトに簡単に導入することができます。</head>内に追加します。Awesomeのライブラリを自分のサイトに保存して読み込む場合は、URLを変更して下さい。</head>内に追加します。});});</script>100の値はスクロールでボタンを表示させるpx数です。150にすると150px下にスクロールした時に表示するようになります。700の値はトップに戻るエフェクトスクロールの速度です。値が少ない方が速度が速くなります。お好みで調節しましょう。CSSにコードを追加するデザインや色はお好みで変更して下さい。0.5;}HTMLにコードを追加するトップに戻るボタンのコードは、フッター周辺に追加します。デザインによってはフッターの下に回り込んでしまってボタンが押せなくなることもありますが、その際は追加する位置を変更してみて下さい。Iconsで確認できます。Themehausモバイルバージョンを。