Bootstrap-シングルページ制作編7(トップへ戻るボタンの配置)


Bootstrap-シングルページ制作編7(トップへ戻るボタンの配置)

Bootstrapを使ってシンプルなシングルページを制作したいと思うのでその手順を何回かに分けて記録。

Bootstrapの初期CSSをなるべくそのまま使ってサイトを作成。
変更箇所用のCSSを最小限にし、デザインを仕上げて完了の予定とする。

制作編7では前回までで一通り完成したシングルページを利用して、ページ下部にスクロールした際によくある「ページ上部へ戻る」ボタンの配置をしてみたい。(jQuery使用、ソースはwebopixel様のを使わせて頂きました)

シングルページ制作編
Bootstrap-シングルページ制作編1
Bootstrap-シングルページ制作編2
Bootstrap-シングルページ制作編3
Bootstrap-シングルページ制作編4
Bootstrap-シングルページ制作編5
Bootstrap-シングルページ制作編6
Bootstrap-シングルページ制作編7

Bootstrap

シングルページのHTMLへソースを追記

HTML

シングルページのHTML下部に以下のコード追記

css

シングルページのCSSに以下追記

jQuery

jsフォルダ内にある「bootstrap.min.jp」の最終行へ以下追記

ここまで終えたサンプルページ
http://mizukazu.16mb.com/single/s-index6.html
singlepage7


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL