こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

x軸にはスクロールしない、ページ内リンクをスムーズにスクロールするスク

x軸にはスクロールしない、ページ内リンクをスムーズにスクロールするスクリプトを探しています。
こだわりのページ内リンクスムーズスクロール scrollsmoothly.js
http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly
などを色々試しまして、同ページ内のリンクはきれいに動くのを確認しました。
サイトはグローバルメニューが左にあり、横幅が広めのデザインです。

問題は、小さい画面閲覧する際、別ページからページ下部のアンカーへ飛んだ場合です。
一旦ページの最上部左に移動してからアンカーへスクロールするため、
斜め下方向へスクロールし、そこからページの先頭へ戻る場合斜め上にスクロールする
動きになります。

クライアントから動きが気持ち悪いというクレームがあったので、
x軸にはスクロールしない方法を探したのですがなかなかうまくいきません。
jQueryのサンプルなど有りましたら教えてください。

投稿日時 - 2010-11-08 15:22:43

QNo.6305384

すぐに回答ほしいです

質問者が選んだベストアンサー

>>No.2
文字数制限一杯まで詰め込んだので散らかってますが。

MyScroll.setHandler(document); //最終行

引数にclickイベントを監視するルート要素を渡します。
良く分からなければそのままヘッダで読み込んで下さい。

moveToメソッドに数値を渡せばその位置まで移動します。

<script type="text/javascript">
MyScroll.moveTo(
 function() {
  var hash = location.hash;
  if (hash) {
   var target = document.getElementById(hash.substring(1));
  }
  return target ? MyScroll.getPosition(target) : 0;
 }()
);
</script>
</body>

location.hashを使った位置特定(他ページから)はこんな感じ。
body終了タグ直前にでも置いとけばよいかと。

以上、簡単ですが。

投稿日時 - 2010-11-14 12:36:14

お礼

たいへん詳しいご回答ありがとうございます!
今回は他のスクリプトを使いましたが、今後の参考にいたします。

投稿日時 - 2010-11-17 11:27:57

ANo.3

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

var MyScroll = {
getPosition: function(e) {
var r = 0;
do {
r += e.offsetTop || 0;
e = e.offsetParent;
} while (e);
return r;
},
getMovePoint: function(e) {
var d, n, h, t, p;
if (!(d = e && e.ownerDocument)) return;
if (e.tagName !== 'A') {
n = e.parentNode;
while (n && n !== d.body) {
if (n.tagName === 'A') {
e = n;
break;
}
n = n.parentNode;
}
}
if (!(h = e.href)) return;
p = h.lastIndexOf('#');
if (p > -1) {
t = d.getElementById(h.substring(p + 1));
if (t) return MyScroll.getPosition(t);
}
return;
},
moving: function() {
var o = MyScroll, l = 0.18;
var r = o.docElem.scrollTop || o.body.scrollTop;
var e = o.end, d = o.dist, f = o.flag, ed = e + d;
if ((r > ed && f) || (ed > r && !f)) o.stop();
else if ((ed > e && f) || (e > ed && !f)) {
var n = f ? Math.ceil(d * l) : Math.floor(d * l);
if (Math.abs(n) > 100) n = f ? 100 : -100;
window.scrollTo(0, e + (o.dist -= n));
} else o.stop();
},
stop: function() {
clearInterval(MyScroll.tId);
MyScroll.tId = null;
},
moveTo: function(p) {
var d = document, o = MyScroll;
if (!o.root)
o.root = /BackCompat/i.test(d.compatMode) ? d.body : d.documentElement;
if (!o.docElem) o.docElem = d.documentElement;
if (!o.body) o.body = d.body;
if (typeof p !== 'number') return false;
if (typeof o.tId === 'number') o.stop();
var t = o.docElem.scrollTop || o.body.scrollTop;
var l = o.root.scrollHeight - o.root.clientHeight;
o.end = l > p ? (0 > p ? 0 : p) : l;
o.dist = t - o.end;
var f = o.flag = (o.dist >= 0);
if (o.dist === 0 || (t === 0 && f) || (t >= l && !f)) return false;
o.tId = setInterval(o.moving, 10);
return false;
},
handler: function(e) {
var n = MyScroll.getMovePoint(e.target || e.srcElement);
if (typeof n === 'number') {
MyScroll.moveTo(n);
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
},
setHandler: function(r) {
if (r.addEventListener) r.addEventListener('click', MyScroll.handler, false);
else if (r.attachEvent) r.attachEvent('onclick', MyScroll.handler);
}
};

MyScroll.setHandler(document);

投稿日時 - 2010-11-14 12:33:16

ANo.1

そもそも、横方向にスクロールしたくないなら、そのライブラリ?「scrollsmoothly.js」
使わなきゃ良い。そのライブラリーの売りは縦横斜めにビューとスムーズに動く事でしょう。
単純なスムーズスクロールライブラリなら他にもいっぱいあると思うんですが...

「jScrollPane」
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
「Tiny Scrolling」
http://lab.centralscrutinizer.it/the-tiny-scrollings/

どうしても「scrollsmoothly.js」を使いたいなら、詳しく見てませんが、
 function setScroll(hash){..}
内の targetX = Math.min(x, maxScroll.x);
を targetX = 0; 固定に変えておくとか...、
いろいろいじって試してみては

投稿日時 - 2010-11-10 11:36:50

お礼

早速のお返事ありがとうございました。
おっしゃるとおりですね…
他のスクリプトが見つからなかったので質問させていただいたのですが
なんとかクライアントさんに納得いただけるものが見つかりました。

投稿日時 - 2010-11-17 11:27:05

あなたにオススメの質問