ここから本文です

スムーススクロールのプラグイン「scrollsmoothly.js」で、停止位置を 200px下にず...

muh********さん

2013/4/1113:32:15

スムーススクロールのプラグイン「scrollsmoothly.js」で、停止位置を 200px下にずらす方法を教えてください。

他ページからのリンクでもスムーススクロールが可能なプラグイン「scrollsmoothly.js」が気に入っています。
http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly

しかし、上にスクロールすると上端に固定するタイプのナビゲーションバーを設置したところ、アンカーを設定した位置の上にナビゲーションバーが表示されてしまい、アンカーのスタート地点(タイトル)が見えなくなってしまいました。

そこで、スムーススクロールの停止位置を200px下にずらしたいのですが、JavaScriptはこのようなプラグインの利用程度しかしたことがないので、どうしていいのかわかりません。
(思いつくところを変えてみたのですが、うまくいきませんでした)

どうぞ詳しい方、こんな私にご指南ください。

補足上記オリジナルサイトのサンプルを修正したものを、ジオシティーズにUPしました。
http://sky.geocities.jp/muhyai/

回答を頂いたら更新します。
#現在はzpp2777さんのアドバイスを反映しています。200pxずらしてスクロール後、最後にピッと規定のターゲット位置に戻ってしまいます。悩んでいる製作中のサイトも同じ現象です。

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
3,311
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

zpp********さん

リクエストマッチ

編集あり2013/4/1114:52:11

// 補足について
すいません。
124行目付近の
location.hash = targetHash;
があるので強制的に行っちゃうんだと思います。
コメントアウトしたらうまくいくと思います。
//location.hash = targetHash;


muhyaiさん

上端固定ナビがあるなら200ピクセル上じゃないですか?

29行目
var prevY = null;
の次の行に
plusY = 200; // スクロール停止位置を調整(-200などもOK)
を追加

103行目付近
targetY = Math.min(y, maxScroll.y);
を以下に変更
targetY = Math.min(y, maxScroll.y) + plusY;

でどうでしょう。
// 未テストです

うまくいったなら停止位置は追加した
plusY
の値で調整してください。

質問した人からのコメント

2013/4/11 15:07:25

ありがとうございます!この補足のところがぜんぜんわかりませんでした!!
希望とおりの動きになって感動です^^

上のサンプルサイトも一応更新しました。
一部、「+ plusY;」については、上部に隙間を持たせたい、ということで動き的に逆でしたので、
「- plusY;」としました。

丁寧で迅速な回答を、本当にありがとうございました^^

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる