jquery设置点击标签，标签滚动到页面顶部

r囧r小猫 2022-06-14 09:29 459阅读 0赞

# 预备知识： #

## （一）jQuery CSS 操作 - offset() 方法 ##

参考地址：[http://www.w3school.com.cn/jquery/css\_offset.asp][http_www.w3school.com.cn_jquery_css_offset.asp]

### 实例 ###

获得 <p> 元素当前的偏移：

$(".btn1").click(function(){
      x=$("p").offset();
      $("#span1").text(x.left);
      $("#span2").text(x.top);
    });

### 定义和用法 ###

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

### 返回偏移坐标 ###

返回第一个匹配元素的偏移坐标。  
该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

### 语法 ###

$(selector).offset()

### 设置偏移坐标 ###

设置所有匹配元素的偏移坐标。

### 语法 ###

$(selector).offset(value)

## （二）jQuery CSS 操作 - scrollTop() 方法 ##

参考地址：[http://www.w3school.com.cn/jquery/css\_scrolltop.asp][http_www.w3school.com.cn_jquery_css_scrolltop.asp]

### 实例 ###

设置 <div> 元素中滚动条的垂直偏移：

$(".btn1").click(function(){
      $("div").scrollLeft(100);
    });

### 定义和用法 ###

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。  
scroll top offset 指的是滚动条相对于其顶部的偏移。  
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

### 语法 ###

$(selector).scrollTop(offset)

### 提示和注释 ###

注释：该方法对于可见元素和不可见元素均有效。  
注释：当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。  
注释：当用于设置值时，该方法设置所有匹配元素的 scroll top offset。

## （三）jQuery 参考手册 - jQuery CSS 操作函数 ##

参考地址：[http://www.w3school.com.cn/jquery/jquery\_ref\_css.asp][http_www.w3school.com.cn_jquery_jquery_ref_css.asp]

css() 设置或返回匹配元素的样式属性。  
height()          设置或返回匹配元素的高度。  
offset()          返回第一个匹配元素相对于文档的位置。  
offsetParent() 返回最近的定位祖先元素。  
position()  返回第一个匹配元素相对于父元素的位置。  
scrollLeft()          设置或返回匹配元素相对滚动条左侧的偏移。  
scrollTop()          设置或返回匹配元素相对滚动条顶部的偏移。  
width()          设置或返回匹配元素的宽度。

# 开始动手： #

## 1.jsp页面标签元素 ##

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <div id="excelgridDIV" style="text-align: center;">
    	<div align="left" class="base_title impact1_title">
    		<div id = "showDetail">
       		</div>
    	</div>	
    	<div id="excelgrid" class="mini-datagrid" style="width:100%;height:100%;" url="" fitColumns="false" showSummaryRow="true"
    	showPager="false" pageSize="10000" ondrawsummarycell="onDrawSummaryCell" allowResize="false" allowMoveColumn="false">
    		<div property="columns" >
    	        <div headerAlign="center" type="indexcolumn">序号</div>                
    	        <div field="name" width="300" headerAlign="center">指标名称</div>    
    	        <div field="unit" width="60" align='center'  headerAlign="center">指标单位</div>
    	        <div field="value" width="80px" align='right' headerAlign="center">指标值</div>
    		</div>
    	</div>
    </div>

## 2.编写js ##

效果：点击id为excelgrid的div时，div移到最上方。

[http_www.w3school.com.cn_jquery_css_offset.asp]: http://www.w3school.com.cn/jquery/css_offset.asp
[http_www.w3school.com.cn_jquery_css_scrolltop.asp]: http://www.w3school.com.cn/jquery/css_scrolltop.asp
[http_www.w3school.com.cn_jquery_jquery_ref_css.asp]: http://www.w3school.com.cn/jquery/jquery_ref_css.asp