画面上で固定位置に、フロートメニューを表示する。
縦に長いランディングページなどで、画面右下に「TOPへ」という画像を
CSS と HTML だけでフロートさせる。
style.css
div#floating-menu {
position: fixed; ←表示位置を、次行で指定する位置に固定する
top: 0px; ←トップから０ピクセル
left: 0px; ←left,right ０pxにすることで、横幅いっぱい
right: 0px; ただし、今回のように「トップへ」だけであれば、右下の小スペースを指定
background-color: transparent; ←この指定にすると、背景が透明になる
border: 1px solid #000000; ←画像の囲み線（不要であれば記入しない）
z-index: 9999; ←重なる要素があった場合一番上に表示
}
html
＜div id=”floating-menu”>
＜a href=”#header”>↑TOP へ[/su_button]＜/a>
＜/div>
この記述場所は、WPの場合は、本文中どこでも良いが、htmlタグを入力した部分にスペースが出るので、最終行の部分に記入した。 ビルダーを使ったページの場合も、最終行のテキストウィジェットに記入。
おまけ
CSSに opacity: 0.5; を追記すると、半透明になる。
参考サイト
http://blog.livedoor.jp/kamikaze_cyclone/archives/19186302.html