ページ全体をスクロールできるscrollsmoothly.jsをつかってサイトを構築しているのですが
設定上、どうしても左上からしか表示がされません。
■scrollsmoothly.js
http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmo …
上記の中にあるsection2から下の場所を変更することはCSSで可能ですが
そうではなく、たとえば、スタートの位置をsection5あたりにもってきて
最初section1が表示され、斜めに移動するような動作をさせたいのですが
どこをどのように変更すればよいでしょうか?
イメージとしては
http://biwako-koyo.com/
ここのサイトが理想的です。
No.3ベストアンサー
- 回答日時:
どうせ前の質問で、「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
- 回答日時:
#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
- 回答日時:
スタートが 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/でそれを実現させたいです・・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
- サーバー 別サーバに構築したApache+Tomcatの連携について 2 2023/03/06 23:23
- Excel(エクセル) 【エクセルマクロ】既に開いているIEの、サイズや表示位置を変更するには 4 2022/12/01 22:57
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- Chrome(クローム) 最近のGoogle Chromeのデータ読み込みの遅延やエラーって頻発しますか? 2 2023/01/06 22:12
- その他(ブラウザ) IE・edgeで日増しに観られるサイトが減ってくる。 1 2022/10/04 22:40
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MFCを使って、ひとつのkey(CStr...
-
IE等のブラウザにテキスト入...
-
デジタル時計の時刻合わせの方...
-
マイページはどこを開くの
-
Javascript_submit()完了後に処...
-
エクセルのシート上に別のシー...
-
ウインドウを毎回同じ位置、大...
-
リストビューをスクロールさせ...
-
スクリプトって、何ですか?ど...
-
一定時間おきにアラームやポッ...
-
Excelでワードアートや図を常に...
-
VBAで任意のウインドウのサイズ...
-
「Cancel = True」とはどういう...
-
Outlookでこのような表示がされ...
-
ExcelVBAで他のアプリをスクロ...
-
PDFを(htmlのように)無限に縦...
-
Youtubeが勝手に右下に勝手に小...
-
パソコンを起動させたら文字の...
-
エクセルVBAでフォームのListbo...
-
Excelのワークシートが全部表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MFCを使って、ひとつのkey(CStr...
-
PL/Iについて、教えてください。
-
(VBS) テキストファイル読込で...
-
VC++のデバッガでvectorの要素...
-
bxSliderで動画をスライドごと...
-
【VBA/HTML】特定のタグ要素に...
-
no confilict で value値が取れな
-
WebサイトのHTMLオブジェクトの...
-
ICPCの過去問
-
エクセルでタグの内容が取得で...
-
フローティングのやり方について
-
フォームで入力時自動で次の項...
-
エクセルの散布図で選択してい...
-
Ajax.Updaterで読み込んだ先の...
-
JavaScriptでクリップボードの...
-
lispについて質問です
-
フォームをリサイズ後に動作を行う
-
ページ全体をスクロールするAja...
-
jqueryでtable内容の置き換え
-
VBA スクレイピング
おすすめ情報