方法原理:

    (1)使用jQuery CSS 操作 - scrollTop() 方法,设置 <div> 元素中滚动条的垂直偏移,语法:$(selector).scrollTop(offset);
  (2)若要控制滚动条水平偏移,请使用方法scrollLeft(),语法:$(selector).scrollLeft(offset);
其中selector表示选择器,offset表示偏移量。
  
样例页面MyJsp.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'MyJsp.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("#test div").scrollTop(100);
  });
  $(".btn2").click(function(){
    alert($("div").scrollTop()+" px");
  });
});
</script>
</head>

<body>
    <div id="test">
    <div 
        style="border:1px solid black;width:200px;height:200px;overflow:auto">
        This is some text. This is some text. This is some text. This is some
        text. This is some text. This is some text. This is some text. This is
        some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some
        text. This is some text. This is some text. This is some text. This is
        some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some
        text. This is some text. This is some text. This is some text. This is
        some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.</div>
        </div>
    <button class="btn1">把 scroll top offset 设置为 100px</button>
    <br />
    <button class="btn2">获得 scroll top offset</button>

</body>
</html>
View Code

 

相关文章:

  • 2022-01-18
  • 2021-08-23
  • 2021-11-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-08
  • 2021-11-07
  • 2022-12-23
猜你喜欢
  • 2021-06-17
  • 2021-10-07
  • 2021-05-09
  • 2022-01-15
  • 2021-05-29
  • 2021-09-12
  • 2022-12-23
相关资源
相似解决方案