JQuery控制螢幕滾動到指定控制元件位置
阿新 • • 發佈：2019-01-05
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 引用百度JQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> var jQuery=jQuery.noConflict(); // 單擊控制元件使控制元件位於螢幕頂部三分之一處 function MouseLeftClick(event) { var tMouseNum = event.button; //具體值API if(event && tMouseNum == 0){ // 單擊 0滑鼠左鍵 1滑鼠中鍵 2滑鼠右鍵 否則其他 var tElementId = event.srcElement.id ; if(tElementId!=""||tElementId!=null){ scrollPosition(tElementId) ; } } } // // Tab切換事件 // document.onkeypress=function(event){ // var e = event || window.event || arguments.callee.caller.arguments[0]; // if(e && e.keyCode==9){ // 按 Tab // var tElementId = event.srcElement.id; // if(tElementId!=""||tElementId!=null){ // scrollPosition(tElementId) ; // }else{ // alert("ddd"+tElementId); // } // } // }; // 控制頁面滾動到指定位置 function scrollPosition(pElementId) { var tTop = jQuery("#"+pElementId).offset().top; //得到控制元件Top var tWindowHeight = jQuery(window).height(); //瀏覽器可視視窗高度 var tElementHeight = jQuery("#"+pElementId).height(); //控制元件高度 var tScrollTop = tTop-tWindowHeight*0.3-tElementHeight*0.5; //讓控制元件中心位於可視視窗3分之1處 jQuery('html, body').animate({ scrollTop: tScrollTop }, 1000); } </script> </head> <body onmousedown="MouseLeftClick(event)"> <div style="margin:0 auto;border:1px solid #000;width:180px;height:1600px"> <br><br><br><br><br><br><br><br><br><br><br><br> <input id="1" tabindex="1" value="切換第一個" /><br><br><br><br><br><br><br><br><br><br> <input id="4" tabindex="4" value="切換第四個" /><br><br><br><br><br><br><br><br><br><br> <input id="2" tabindex="2" value="切換第二個" /><br><br><br><br><br><br><br><br><br><br> <input id="5" tabindex="5" value="切換第五個" /><br><br><br><br><br><br><br><br><br><br> <input id="3" tabindex="3" value="切換第三個" /><br><br><br><br><br><br><br><br><br><br> <input id="6" tabindex="6" value="切換第六個" /><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> </div> </body> </html>