jQuery中scrollTop()方法解析

最新推荐文章于 2023-06-17 13:58:23 发布

ITzhongzi

最新推荐文章于 2023-06-17 13:58:23 发布

阅读量3.2k

点赞数 1

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/ITzhongzi/article/details/64132947

版权

前端学习笔记专栏收录该内容

306 篇文章 7 订阅

订阅专栏

在jq中，scrollTop（）方法：

调用方式： jq对象.scrollTop()

1、当不传入任何参数时，获取调用该方法的jq对象中匹配的dom元素的子元素卷起的高度。

2、当传入一个参数的时候，表示设置调用该方法的jq对象中匹配的dom元素的子元素的据其高度

示例demo1：（不传参数获取p内部卷起的高度）

  
  
   
   
    
    <!DOCTYPE html>
   
   
  
  
  
  
   
   
    
    <html>
   
   
  
  
  
  
   
   
    
    <head>
   
   
  
  
  
  
   
   
    
      <style>
   
   
  
  
  
  
   
   
    
      p { margin:10px;padding:5px;border:2px solid #666; }
   
   
  
  
  
  
   
   
    
      </style>
   
   
  
  
  
  
   
   
    
      <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
   
   
  
  
  
  
   
   
    
    </head>
   
   
  
  
  
  
   
   
    
    <body>
   
   
  
  
  
  
   
   
    
      <p>Hello</p><p></p>
   
   
  
  
  
  
   
   
    
    <script>var p = $("p:first");
   
   
  
  
  
  
   
   
    
    $("p:last").text( "scrollTop:" + p.scrollTop() );
   
   
  
  
  
  
   
   
    
    </script>
   
   
  
  
  
  
   
   
    
     
   
   
  
  
  
  
   
   
    
    </body>
   
   
  
  
  
  
   
   
    
    </html>

示例demo2：（设置一个div的scrollTop。）

  
  
   
   
    
    <!DOCTYPE html>
   
   
  
  
  
  
   
   
    
    <html>
   
   
  
  
  
  
   
   
    
    <head>
   
   
  
  
  
  
   
   
    
      <style>
   
   
  
  
  
  
   
   
    
    div.demo {
   
   
  
  
  
  
   
   
    
    background:#CCCCCC none repeat scroll 0 0;
   
   
  
  
  
  
   
   
    
    border:3px solid #666666;
   
   
  
  
  
  
   
   
    
    margin:5px;
   
   
  
  
  
  
   
   
    
    padding:5px;
   
   
  
  
  
  
   
   
    
    position:relative;
   
   
  
  
  
  
   
   
    
    width:200px;
   
   
  
  
  
  
   
   
    
    height:100px;
   
   
  
  
  
  
   
   
    
    overflow:auto;
   
   
  
  
  
  
   
   
    
    }
   
   
  
  
  
  
   
   
    
      p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
   
   
  
  
  
  
   
   
    
      </style>
   
   
  
  
  
  
   
   
    
      <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
   
   
  
  
  
  
   
   
    
    </head>
   
   
  
  
  
  
   
   
    
    <body>
   
   
  
  
  
  
   
   
    
      <div class="demo"><h1>lalala</h1><p>Hello</p></div>
   
   
  
  
  
  
   
   
    
    <script>$("div.demo").scrollTop(300);
   
   
  
  
  
  
   
   
    
    </script>
   
   
  
  
  
  
   
   
    
     
   
   
  
  
  
  
   
   
    
    </body>
   
   
  
  
  
  
   
   
    
    </html>

示例demo3：（设置div.inner的卷起高度，设置了键盘上的“上”和“下”的监听事件）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery中的scrollTop（）</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #cccccc;
        }
        .outer {
            width: 540px;
            height: 300px;
            border: 1px solid #000;
            margin: 20px auto;
            background-color: #fff;
            /*overflow: hidden;*/
        }
        .inner {
            width: 540px;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="inner">
        <div class="con">
            <p>各种酷炫的VR硬件和游戏让我们形成了一种“VR是纯纯的科技产物”的思维定式，你不知道，其实VR也可以很文艺。               VR重现《尤利西斯》经典场景 美联社报道，美国波士顿学院教授Joseph
                Nugent正在带领学生打造一款VR游戏，特别的是，这款游戏将以James
                Joyce的经典名著《尤利西斯》的情节作为背景。他们的目的是希望借此吸引更多人阅读文学经典。                          过去想象中的文学场景变成眼前可见的</p>
            <p>各种酷炫的VR硬件和游戏让我们形成了一种“VR是纯纯的科技产物”的思维定式，你不知道，其实VR也可以很文艺。               VR重现《尤利西斯》经典场景 美联社报道，美国波士顿学院教授Joseph
                Nugent正在带领学生打造一款VR游戏，特别的是，这款游戏将以James
                Joyce的经典名著《尤利西斯》的情节作为背景。他们的目的是希望借此吸引更多人阅读文学经典。                          过去想象中的文学场景变成眼前可见的</p>
            <p>各种酷炫的VR硬件和游戏让我们形成了一种“VR是纯纯的科技产物”的思维定式，你不知道，其实VR也可以很文艺。               VR重现《尤利西斯》经典场景 美联社报道，美国波士顿学院教授Joseph
                Nugent正在带领学生打造一款VR游戏，特别的是，这款游戏将以James
                Joyce的经典名著《尤利西斯》的情节作为背景。他们的目的是希望借此吸引更多人阅读文学经典。                          过去想象中的文学场景变成眼前可见的</p>
            <p>各种酷炫的VR硬件和游戏让我们形成了一种“VR是纯纯的科技产物”的思维定式，你不知道，其实VR也可以很文艺。               VR重现《尤利西斯》经典场景 美联社报道，美国波士顿学院教授Joseph
                Nugent正在带领学生打造一款VR游戏，特别的是，这款游戏将以James
                Joyce的经典名著《尤利西斯》的情节作为背景。他们的目的是希望借此吸引更多人阅读文学经典。                          过去想象中的文学场景变成眼前可见的</p>
        </div>
    </div>
</div>
</body>
<script src="jq/jquery-2.1.4.js"></script>
<script>

    /*
    * 检测键盘点击事件，
    * 按 上 的话向上卷起  10px
     * 按 下 的话向虾卷起  10px
    * */
    $(document).on('keyup',function(e){
        //上 38 下 40
        var top = $('.inner').scrollTop();
        var totalH = $('.con').height();
        var differenceValue = totalH - $('.inner').height() - top;
        if(e.keyCode == 38){
            if(top > 10){
                $('.inner').scrollTop(top - 10);
            }else{
                $('.inner').scrollTop(0);
            }
        }
        if(e.keyCode == 40){
            if(differenceValue > 10){
                $('.inner').scrollTop(top + 10);
            }else{
                $('.inner').scrollTop(totalH - $('.inner').height());
            }
        }
    });
</script>
</html>

ITzhongzi

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery中scrollTop()方法解析

在jq中，scrollTop（）方法：调用方式： jq对象.scrollTop() 1、当不传入任何参数时，获取调用该方法的jq对象中匹配的dom元素的子元素卷起的高度。2、当传入一个参数的时候，表示设置调用该方法的jq对象中匹配的dom元素的子元素的据其高度示例demo1：（不传参数获取p内部卷起的高度）html>head> styl
复制链接

扫一扫