例子-CSDN博客

本文链接：https://blog.csdn.net/songtaiwu/article/details/79457462

自己写的offset例子

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="height=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  <title>scrollTop demo</title>
  <style>
  p {
    margin: 10px 0 10px 0;
    padding: 5px;
    height: 50px;
    width: 100%;
    background-color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
 
<script>
  $.each($('p'),function(k,v){
       a = $(this).offset().top;
       $(this).html(a);
  });
</script>
 
</body>
</html>

自己写的scrollTop- -函数例子

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="height=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  <title>scrollTop demo</title>
  <style>
  p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
    height: 50px;
    width: 100%;
    background-color: blue;
  }
  .big{
    height:300px;
    width:250px;
    overflow: scroll;
  }
  .item{
    background-color: green;
    height:100px;
    width: 250px;
  }
  #show1{
    position: fixed;
    top:0;
    right:0;
    background-color: yellow;
    height:50px;
    width:100px;
    font-size: 14px;
  }
  #show2{
    position: fixed;
    top:50px;
    right:0;
    background-color: white;
    height:50px;
    width:100px;
    font-size: 14px;
  }
  #show3{
    position: fixed;
    top:100px;
    right:0;
    height:50px;
    width:100px;
    font-size: 14px;
    z-index: 100;
  }
  #show3 button{
    background-color: red;
  }

  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

  <div class='big'>
    <div class='item'>1</div> 
    <div class='item'>2</div>
    <div class='item'>3</div>
    <div class='item'>4</div>
    <div class='item'>5</div>
    <div class='item'>6</div>
  </div>

  <div id='show1'></div>
  <div id='show2'></div>
  <div id='show3'>
    <button id='btn1'>big回到10</button>

    <button id='btn2'>document回到10</button>
  </div>
 
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>


<p></p>
 
<script>
$('.big').scroll(function(){
  var a = $(this).scrollTop();
  $('#show1').html('big:' + a);
});

$(document).scroll(function(){
  var b = $(this).scrollTop();
  $('#show2').html('document:' + b);
})

$('#btn1').click(function(){
  $('.big').scrollTop(10);
});

$('#btn2').click(function(){
  $(document).scrollTop(10);
});
</script>
 
</body>
</html>