トップに最初に表示されるエリアの位置について。

質問

トップに最初に表示されるエリアの位置について。

一枚の縦に長いウェブサイトを作っています。

メニューは5項目でトップに固定してあり、
下に文章や画像等が5項目ならんでいます。

サイトに初めに来た時に、1項目目でなく4項目目が見えるように
したいのです。

また、もし素人レベルで可能であれば、
メニューを選んだ際に、ユーザーが同じページのスクロールだと
分かるようにゆっくりと上下するにしたいです。

ウェブ作成初心者です。
分かりやすく教えていただけると助かりますm(__)m

回答No.1

pnck · ベストアンサー

HTMLだけでは無理ですので、JavaScriptが必要になります。
Web作成初心者だと少し難しいかもしれません。

> サイトに初めに来た時に、1項目目でなく4項目目が見えるように

こちらに関しては、Cookieを使って実装します。
Cookieについての説明は、↓に書いてあります。
http://e-words.jp/w/Cookie.html
初回訪問時はCookieが見つからないので、
見つからなかったら4項目目に飛ばすという処理を、JavaScriptで記述します。
そしてその際にCookieを発行します。
Cookieの発行方法は様々ですが、この場合JavaScriptで発行するのがベターでしょう。
こうすることによって、初回訪問であるかを判別できるようになります。
ただCookieは任意のタイミングで消せるし、受け付けない人もいるので、
そういう人たちには毎回4項目目が表示される可能性があります。

> メニューを選んだ際に、ユーザーが同じページのスクロールだと
> 分かるようにゆっくりと上下するにしたいです。

こういうエフェクトなども、多くはJavaScriptで実装します。
エフェクトの内容によっては最近のCSSで実装できる場合もありますが、
CSSに関してはあまり詳しくないのですみません。
この場合、1/10秒毎に目的地に向かって一定の距離を進むような処理を記述します。

Cookie処理はそんなに難しくないので、少し調べれば気合で実装できると思います。
エフェクト処理は、初心者には少し難しいかもしれませんが、
簡単に行うためのライブラリがたくさんあるので、そういうのを試すといいと思います。
とはいっても、JavaScriptの知識が少々いるので、一筋縄にはいきませんが・・・
初心者だと意味不明だとは思いますが、1つ紹介しときます。

スクロール（コード説明）
http://www.webdesignerwall.com/tutorials/scrollto-posts-with-jquery/
スクロール（デモ）
http://www.webdesignerwall.com/demo/scrollto-demo/

ちなみに私なら、Cookieは使わず『初めて訪問した方は項目4を御覧ください。』
という文章とともにリンクを目立つとこに貼ることで対処します。

お礼

ありがとうございます。
確かに素人には[ちんぷんかんぷん]！ですね・・・
やりたいことばかりが先走ってしまって
頭が追いつきません。
地道に勉強してみます。

ありがとうございました！