jQueryでアンカーリンクをスムーズスクロールの練習

要素を動かすのは前回の(フローティングメニュー作成)でなんとなくわかったけど
全体をスクロールさせる方法はさっぱりなので調べた。

$(function(){
  $('a[href*=#]').click(function() {
    var $target=$(this.hash);
    var targetY=$target.offset().top;
    $('html').animate({scrollTop: targetY},2000);return false;
  });
});

$(function(){

$('a[href*=#]').click(function() {

var $target=$(this.hash);

var targetY=$target.offset().top;

$('html').animate({scrollTop: targetY},2000);return false;

});

$('a[href*=#]').click(function() {

1	$('a[href*=#]').click(function() {

#を含むリンクをクリックすると

var $target=$(this.hash);
var targetY=$target.offset().top;

1 2	var $target=$(this.hash); var targetY=$target.offset().top;

クリックされた要素のハッシュを$targetに入れて
offset().top;で位置を調べてtargetYに入れる

$('html').animate({scrollTop: targetY},2000);return false;

1	$('html').animate({scrollTop: targetY},2000);return false;

scrollTop(=スクロールの位置)に先程調べたtargetYを入れる、2000ミリ秒で移動完了。

以上のコードでFirefox、Opera、IE8と動いた
さすがjQuery、案外簡単にできちゃうんだなぁと思っていたら
Chromeで動かない、うんともすんとも言わない(safariの確認はしてない)。

$(‘html’).を変更する

$('html,body')

1	$('html,body')

とすると
chromeでも動くようになった、良かった。

だが断るしかし

今度はOperaで上に戻るスクロールが通常のアンカーリンクのように一瞬でページの一番上まで戻り、それからゆるゆるとスクロールしながら画面がチカチカする。

Operaでは、htmlとbody両方の指定が有効になるのがチラつきの原因みたい。とほほ
jQueryでscrollToを使うときの注意点 – NoteBook
$(‘html’)と$(‘body’)のどちらが有効か?の表がある。

しかし、operaでは、両方の指定が有効になり、ちらつきの原因となるので、以下のように指定します。

$($.browser.opera ? document.compatMode == ‘BackCompat’ ? ‘body’ : ‘html’ :’html,body’)
.animate({scrollTop:目標のオフセット値Y,scrollLeft:目標のオフセット値X});

流用させてもらったらこうなった。

$(function(){
  $('a[href*=#]').click(function() {
    var $target=$(this.hash);
    var targetY=$target.offset().top;
    $($.browser.opera ? document.compatMode == 'BackCompat' ? 'body' : 'html' :'html,body').animate({scrollTop: targetY},2000);return false;
  });
});

$(function(){

$('a[href*=#]').click(function() {

var $target=$(this.hash);

var targetY=$target.offset().top;

$($.browser.opera ? document.compatMode == 'BackCompat' ? 'body' : 'html' :'html,body').animate({scrollTop: targetY},2000);return false;

});

しかしこの三項演算子が全く解読できない＞＜

今回チェック用のhtmlとcss

<body>
<p><a href="clicktest.html">clicktest</a></p>
<p><a href="#abc">link</a></p>
<p><a href="#def">link</a></p>
<p><a href="#ghi">link</a></p>
<div id="wrap"> wrap内 </div>
<p id="abc">abc</p>
<p id="def">def</p>
<p id="ghi">ghi</p>
<p><a href="#wrap">to wrap</a></p>
</body>

<body>

<p><a href="clicktest.html">clicktest</a></p>

<div id="wrap"> wrap内 </div>

</body>

<style type="text/css">
body {
  text-align:center;
}
#wrap {
  height:5000px;
  background-color:#f63;
}
</style>

body {

text-align:center;

}

#wrap {

height:5000px;

background-color:#f63;

}

</style>

メモ

$.browser.～
jQuery.browser – jQuery 日本語リファレンス

※jQuery 1.3からはサポート外。jQuery.supportを使って下さい。
navigator.userAgentを元に、ユーザエージェントを識別するためのフラグを連想配列として保持しています。
現時点で有効なフラグは次の通りです。
* safari
* opera
* msie
* mozilla

jQueryでアンカーリンクをスムーズスクロールの練習

$(‘html’).を変更する

だが断るしかし

今回チェック用のhtmlとcss

メモ

関連記事かもしれん:

コメント

コメントを残すコメントをキャンセル

最近の投稿

カテゴリー

$(‘html’).を変更する

だが断るしかし

今回チェック用のhtmlとcss

メモ

関連記事かもしれん:

SNSでもご購読できます。

コメント

コメントを残す コメントをキャンセル

最近の投稿

よく見られているページ

カテゴリー

コメントを残すコメントをキャンセル