温故知新 linux実践講座

温故知新 linux実践講座

温故知新。linuxを使いこなしてみよう。

ホーム » HTML5 » 

jquery リンク先のページを開く時にスクロールして開く

所要時間 約 4分

hoge.htmlのページにあるリンクをクリックすると
hogehoge.htmlページを開く時に
hogehoge.htmlのIDタグの所までスクロールしながら
移動する。

jQuery の animate の速度(動作時間)を指定する方法
・animate の速度の指定方法:animate の速度(動作時間)の指定方法は、2種類ある。
1 animate( properties, [ duration ], [ easing ], [ complete ] )
[ duration ] に入るのは、ミリ秒単位の数字、もしくは、'slow'、'normal'、'fast'、の文字列。

animate( { width: 'toggle',}, 'slow' )

2 animate( properties, options )

animate( { width: 'toggle',}, { duration: 'slow' } )

hoge.html

<a href="hogehoge.html?no=3" target="_blank">リンク先はこちらです。</a>

hogehoge.html

<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
 
<script type="text/javascript">
$(function() {
        var n = window.location.href.slice(window.location.href.indexOf('?') + 4);
        if(n.length < $("#sample div").size()) {
                var p = $("#sample div").eq(n).offset().top;
                $('html,body').animate({ scrollTop: p }, 19000); // 19000はミリ秒
                return false;
        }
});
 
</script>
</head>
bodyタグの最初と最後に <div id="sample">、</div>を挿入。
ジャンプ先に <div id="no"></div> を複数挿入。

 

 

 

src源に感謝です。
リンク先ページの指定位置にスクロールで移動

 

 

  HTML5 

アフィリエイトで稼ぐ
プロフィール

ぴよふぁくとりぃです。

職業は自宅でサーバ管理、資格は薬剤師です。
趣味も職業もパソコンラブです。
よろしくね。
連絡先: admin@arakanoj.com
URL: http://piyofactory.com

検索
人気ページ
東京電力予想最大電力(万kW)
twitter
使い方を知れば知るほど楽しく使える Linux。
Linux の基本を覚えてもっともっと楽しいコンピュータの使い方を身につけましょう。