JQuery控制屏幕滚动到指定控件位置

最新推荐文章于 2024-06-11 15:23:22 发布

RoadStillFaraway

最新推荐文章于 2024-06-11 15:23:22 发布

阅读量4.6k

点赞数 1

分类专栏：前端-CSS/JS/JQuery 文章标签： jquery javascript 屏幕滚动

本文链接：https://blog.csdn.net/RodeStillFaraway/article/details/78614805

版权

前端-CSS/JS/JQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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.οnkeypress=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 οnmοusedοwn="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>