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

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

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

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

No.3 ベストアンサー 回答者： my-- 回答日時： 2010/11/14 12:36

>>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/17 11:27

No.2 回答者： my-- 回答日時： 2010/11/14 12:33

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);

No.1 回答者： yyr446 回答日時： 2010/11/10 11:36

そもそも、横方向にスクロールしたくないなら、そのライブラリ？「scrollsmoothly.js」

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

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

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

この回答へのお礼

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

お礼日時：2010/11/17 11:27