ページ全体をスクロールするAjaxで真ん中から

質問

ページ全体をスクロールできるscrollsmoothly.jsをつかってサイトを構築しているのですが
設定上、どうしても左上からしか表示がされません。

■scrollsmoothly.js
http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly

上記の中にあるsection2から下の場所を変更することはCSSで可能ですが
そうではなく、たとえば、スタートの位置をsection5あたりにもってきて
最初section1が表示され、斜めに移動するような動作をさせたいのですが
どこをどのように変更すればよいでしょうか？

イメージとしては
http://biwako-koyo.com/
ここのサイトが理想的です。

回答No.3

yyr446 · ベストアンサー

どうせ前の質問で、「scrollsmoothly.js」改造してるんだから、
ついでに、場当たり的にいじっちゃえば、
「scrollsmoothly.js」のfunction init(){}の最後
48行目あたりに、
　　 function init(){
　　　 // ページ内リンクにイベントを設定する
　　　 setOnClickHandler();
　　　 // 外部からページ内リンク付きで呼び出された場合
　　　 if(incomingHash){
　　　　 if(window.attachEvent && !window.opera){
　　　　　 // IEの場合はちょっと待ってからスクロール
　　　　　 setTimeout(function(){scrollTo(0,0);setScroll('#'+incomingHash);},50);
　　　　 }else{
　　　　　 // IE以外はそのままGO
　　　　　 scrollTo(0, 0);
　　　　　 setScroll('#'+incomingHash);
　　　　 }
　　　 }
//ここに追加か、------------------------------
setScroll("#section5");
setTimeout(function(){setScroll("#section1");},1000); //1秒後に移動
　　 }

このスクリプトをもっと汎用的にクラス化したいところだけど、あまり弄ると別物になっちゃう。

お礼

おぉぉぉぉ！！
できました！！

前回の質問の際も教えていただいて
今回も解決に導いていただき誠にありがとうございます！！

場当たり的にいじってみたいのですが
どこをどうやっていじればいいのかすら検討がつかないのです・・・。

ご面倒おかけします・・・。
もうひとつこの「scrollsmoothly.js」で質問がありますので
またお時間があるときにご教授いただければ幸いです。

回答No.2

think49

#1 です。

http://biwako-koyo.com/ が右下から左上へスクロールする形だったので、右下に存在する #section5 から 左上の #section1 にスクロールする動作を期待しているのだと思っていました。
「スタートの位置」と「最初」のニュアンスがわからなくて混同していたのですが、私が想定した動作ではなかったようですね…。

> #section5まで読み込んだ時点で移動したいという意味です。
イメージとしては、こういうことですか？

document.getElementById('section5').addEventListener('load', function () { // #section5 が読み込み完了したら
　// #section5 までスクロールする
}, false);

loadイベントハンドラはdiv要素に定義できないので、これは実際には動きません。
仕方ないので、window.setTimeout で一定時間置きに #section5 が読み込まれたかをチェックします。

---
(function () {
　var elementId, timeId;

　function isLoadedElement () {
　　if (document.getElementById(elementId)) {
　　　clearTimeout(timeId);
　　　console.log('#section5 is loaded'); // ここに #section5 までスクロールする処理を入れる
　　} else {
　　　timeId = setTimeout(isLoadedElement, 100);
　　}
　}

　elementId = 'section5';
　isLoadedElement();
})();
---

補足

回答ありがとうございます☆

申し訳ございません・・・。詳しく教えていただいているのですが
どこにご教授いただいたコードをいれればいいのかわかりません。
試してみたのですが動きませんでした・・・。
試した方法としましては、

------------------------------------------------------------

(function () {
　var elementId, timeId;

　function isLoadedElement () {
　　if (document.getElementById(elementId)) {
　　　clearTimeout(timeId);
　　　console.log('#section5 is loaded'); // ここに #section5 までスクロールする処理を入れる
　　} else {
　　　timeId = setTimeout(isLoadedElement, 100);
　　}
　}

　elementId = 'section5';
　isLoadedElement();
})();

を、scrollsmoothly.jsの中にある

(function(){
var easing = 0.20;
var interval = 100;

の前にそのままコピペしました。

教えていただいた

-------------------------------

document.getElementById('section5').addEventListener('load', function () { // #section5 が読み込み完了したら
　// #section5 までスクロールする
}, false);

loadイベントハンドラはdiv要素に定義できないので、これは実際には動きません。
仕方ないので、window.setTimeout で一定時間置きに #section5 が読み込まれたかをチェックします。

-------------------------------

のあたりが、よくわかりません・・・。
初心者に毛が生えた程度ですので、初歩的な質問ばかりで申し訳ございません・・・。

回答No.1

think49

スタートが section5 で最初が section1 って…。
#section5 から #section1 にスクロールしたい、ってことでいいでしょうか？

1. body.style.display = 'none';
2. window.onload 時に #section5 までスクロール
3. body.style.display = 'block';
4. #section1 までスクロール

補足

回答ありがとうございます。
申し訳ないのですが、ご教授いただいた内容がわかりません・・・。

イメージしておりますのは、最初は#section1から読み込んでも
#section5まで読み込んだ時点で移動したいという意味です。

hogehoge.com/#section5　でそれは可能なのですが

hogehoge.com/でそれを実現させたいです・・・。