ショップサーブではデフォルトでページの先頭へ戻るボタンが
トップページ、カート画面以外のページで表示されますが、
あるんだかないんだかわからない場所(フッターフリーエリアの前)に
あるだけなので、あまり意味がない気がしましたので、
ちょっぴりカスタムしてみました。

デフォルトだとこんなです ↓

単純に表示したくない場合はスタイルシートの該当部分を↓

に変更すれば非表示になります。

このページトップのリンク先ですが、
ヘッダーの直ぐ上の

というところにリンクになっています。

ちなみに id ではなくアンカータグの name になっているのが
スムーススクロールさせるにはちょっとやりにくいところですが、
今回は固定配置にして、スムーススクロールするようにしてみました。

それともともとあってないようなものでしたので、
最近かなり減ってきたIE6は非表示対応しました。
IE7以上と他のモダンブラウザでは同じように表示されているはずです。

実際にどうなっているかは私のサイトのトップページ以下のページをご覧ください。

こんな感じになっています↓

まず通常のスタイルシートは下記のようになっていると思いますが↓

カスタム後はこのようにしました↓

ここまでカスタムすると各ページの右下にピタっと固定されてます。
パディングとかは使う画像によっても変わるので適宜調整してください。

そして、スムーススクロールさせるにはスクリプトを使うしかないのですが、
アンカータグで動作するものを探すのにちょっと苦労しました ^^;

設置が容易でデフォルトのアンカータグでも
スムースに移動してくれるものはこれです↓

dfSmooth Scroll

何がいいのかって、スクリプトを設置して、タグをコピペするだけです 笑

上記ページの下部にある
dfSmooth Scroll 5.66 KB

っという部分をクリックしてダウンロード。

ダウンロードしたスクリプトをFTPでサーバーにアップ。

あとは、下記をサイドエリアのどこかに書きこむだけです。

上記の smooth.pack.js の前に設置した階層までのURL入れてください。

何故にサイドエリアかというと、サイドエリアが表示されるページしか
もともとの仕様で表示されないからです~

ヘッダーとかフッターのフリーエリアに記述するだけ無駄になります~ ^^;

これで一応、簡単にカスタムできると思います。

やってみたいかた是非おためしくだされ~

:: スポンサーリンク ::

posted by そば富泉

コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)