JavaScriptで特定の要素までスクロール honda0510 Follow 2012-03-14 11:14:01 License: MIT License Fork0 Fav0 View364 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 35 lines HTML 3 lines CSS 4 lines 参考にしたサイト ウィンドウ名.scrollTo()－JavaScriptリファレンス http://www.htmq.com/js/window_scrollto.shtml [Javascript] 要素の絶対座標を取得する - The ruin of ruinz - Techmemo http://ruinz.qlookblog.net/js-element-position.html JavaScriptで特定の要素までスクロール window.onload = function() { var target = document.getElementById('middle'); scroll(target); } function scroll(elem) { var pos = getElementPosition(elem); window.scrollTo(0, pos.top); } function getElementPosition(elem) { // スクロール幅を取得 var html = document.documentElement; var body = document.body; var scrollLeft = (body.scrollLeft || html.scrollLeft); var scrollTop = (body.scrollTop || html.scrollTop); // 画面内座標を取得 var pos = getElementScreenPosition(elem); // スクロール幅を加算 var left = pos.left + scrollLeft; var top = pos.top + scrollTop; return {left:left, top:top}; } function getElementScreenPosition(elem) { var html = document.documentElement; var rect = elem.getBoundingClientRect(); var left = rect.left - html.clientLeft; var top = rect.top - html.clientTop; return {left:left, top:top}; } <div>スタート</div> <div id="middle">中間</div> <div>ゴール</div> JavaScriptで特定の要素までスクロール #middle { margin-top: 3000px; margin-bottom: 3000px; } 参考にしたサイト ウィンドウ名.scrollTo()－JavaScriptリファレンス http://www.htmq.com/js/window_scrollto.shtml [Javascript] 要素の絶対座標を取得する - The ruin of ruinz - Techmemo http://ruinz.qlookblog.net/js-element-position.html window.onload = function() { var target = document.getElementById('middle'); scroll(target); } function scroll(elem) { var pos = getElementPosition(elem); window.scrollTo(0, pos.top); } function getElementPosition(elem) { // スクロール幅を取得 var html = document.documentElement; var body = document.body; var scrollLeft = (body.scrollLeft || html.scrollLeft); var scrollTop = (body.scrollTop || html.scrollTop); // 画面内座標を取得 var pos = getElementScreenPosition(elem); // スクロール幅を加算 var left = pos.left + scrollLeft; var top = pos.top + scrollTop; return {left:left, top:top}; } function getElementScreenPosition(elem) { var html = document.documentElement; var rect = elem.getBoundingClientRect(); var left = rect.left - html.clientLeft; var top = rect.top - html.clientTop; return {left:left, top:top}; } <div>スタート</div> <div id="middle">中間</div> <div>ゴール</div> #middle { margin-top: 3000px; margin-bottom: 3000px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description どんなゲームですか？ 参考にしたサイト ウィンドウ名.scrollTo()－JavaScriptリファレンス http://www.htmq.com/js/window_scrollto.shtml [Javascript] 要素の絶対座標を取得する - The ruin of ruinz - Techmemo http://ruinz.qlookblog.net/js-element-position.html Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード sssssss タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Author honda0510 URLhttp://blog.honda0510.dotcloud.com/ Webアプリケーションいじってます。VBAも書きます。 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/oiAP/js"></script> 実行画面をスマートフォンで確認できます。 お父さん QR - App Store library&test Tweet twitter Discussion このコードについて質問・コメントをしてみませんか？ Tags library&test