js代码：

var _parent_top = document.getElementsByClassName('parent')[0].offsetTop;
var _phase_top = document.getElementsByClassName('children')[0].offsetTop;
$('.task-exe-phase-container').animate({scrollTop:(_phase_top - _parent_top)+'px'},500);

注：找到父元素距离当前顶部的滚动距离，找到需要定位的元素距离顶部的距离。他们的差就是滚动条需要滚动的距离。

												


											
offsetTop 实现滚动条内内容定位的更多相关文章
	

    
								
  1. css固定div头部 滚动条滚动内容
		
    页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...
    
		
    2. 
						
  2. 用A标签实现页面内容定位 点击链接跳到具体位置
		
    经常在维基百科等网站看到目录列表,点击链接会跳到具体的位置,小美眉一直在问是怎么做到的,其实挺简单的,用A标签实现页面内容定位就行了.实例参考微信营销理论手册的目录. 首先用A标签定义目录的链接. & ...
    
		
    3. 
						
  3. WPF拖动DataGrid滚动条时内容混乱的解决方法
		
    WPF拖动DataGrid滚动条时内容混乱的解决方法 在WPF中,如果DataGrid里使用了模板列,当拖动滚动条时,往往会出现列表内容显示混乱的情况.解决方法就是在Binding的时候给Update ...
    
		
    4. 
						
  4. js控制滚动条在内容更新超出时自动滚到底部
		
    //滚动条在内容更新时自动滚到底部var message = document.getElementById('message');message.scrollTop = message.scroll ...
    
		
    5. 
						
  5. 原生js模拟锚点，实现点击后，内容定位到本页的对应位置
		
    今天在做angularJS项目过程中,遇见了一个需求,在一个页面中有多个表格,每个表格都有对应的分页,点击顶部对应的模块,可以定位到每个表格模块具体的位置. 页面如下所示: 在angular中,为了使 ...
    
		
    6. 
						
  6. 【原】IOS兼容性之APP内fixed定位头部跳动
		
    兼容现象: 在App的webview里边,我们有时候会在页面里写自定义头部,会使用到fixed定位,我们想要的效果是,页面无论怎么滑动,这个自定义的头部始终是固定在顶部的,但是在ios 11以上的版本 ...
    
		
    7. 
						
  7. table表格td内内容自动换行
		
    项目开发时,遇到问题:td内传入数据,全是字母,不会自动换行 一般字母数字/特殊符号的话,会被浏览器默认是一个字符串或者说一个单词,不会自动换行 所以需要设置一下,让表格内容自动换行. 1.给td标签 ...
    
		
    8. 
						
  8. datatable行内内容太长，有时不自动换行解决方法
		
    加一个css属性即可 style = "word-wrap:break-word;" js代码: "render": function (data, type, ...
    
		
    9. 
						
  9. html2canvas 导出包含滚动条的内容
		
    import html2canvas from 'html2canvas'; exportPDF() { // 导出为 pdf let dom = document.querySelector('yo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. linux系统坏了，进不了登陆界面怎么办？
			
    装oracle时,命令弄错了,结果系统崩溃之后就进不去系统了,启动后光标一直在闪烁,就是不显示登陆界面. 网上查了很多,什么grub引导之类的,完全没办法恢复系统. 系统坏了倒是无所谓,主要是系统上还 ...
    
			
    2. 
						
  2. Swift 里 Set（一）辅助类型
			
    _UnsafeBitset  是一个固定大小的 bitmap,用来确定指定位置是否有元素存在. HashTable  具体的 hash 碰撞算法在HashTable里实现,目前使用的是简单的开放地 ...
    
			
    3. 
						
  3. SQL 一对多联表查询最大值
			
    有两个数据表City表和Price表,CIty表的结构如下: Price表的结构如下: 查询每个城市最大的销售价格,并以最大价格进行降序排列,选取前5条记录,SQL语句的代码如下: * from (s ...
    
			
    4. 
						
  4. JAVA实现微信支付V3
			
    喜欢的朋友可以关注下,粉丝也缺. 相信很多的码友在项目中都需要接入微信支付,虽说微信支付已成为一个普遍的现象,但是接入的过程中难免会遇到各种各样的坑,这一点支付宝的SDK就做的很好,已经完成的都知道了 ...
    
			
    5. 
						
  5. matlab中元胞数组的创建与内容读取
			
    一.创建元胞数组 1.用cell命令创建规格为2*2的空元胞 >> a=cell(2,2) a = [] [] [] [] 2.用大括号"{}"创建元胞数组并赋值 &g ...
    
			
    6. 
						
  6. Redis学习系列四Hash(字典)
			
    一.简介 Redis中的Hash字典相当于C#中的Hashtable,是一种无序字典,内存存储了很对的键值对,实现上和Hashtable一样,都是"数组+链表"二维结构,都是对关键 ...
    
			
    7. 
						
  7. ASP.NET状态管理的总结
			
    阅读目录 开始 hidden-input QueryString Cookie ApplicationState ViewState,ControlState Session Profile 各种状态 ...
    
			
    8. 
						
  8. PHP-引入文件(include)后,页面错位,不居中解决办法
			
    1.把include文件放在head里,不要放在html或doctype上面,这样可以解决居中的问题,空白行的话可以用<div style="display:none"> ...
    
			
    9. 
						
  9. JavaScript -- Opener
			
    -----028-Window-Opener.html----- <!DOCTYPE html> <html> <head> <meta http-equiv ...
    
			
    10. 
						
  10. 阿里2015校招面试回忆录（成功拿到offer）
			
    1. 引言 继上次“百度2015校园招聘面试题回忆录(成功拿到offer)”文章过后,大家都希望除了题目之外,最好能给出自己当时的回答情况,看看有没有什么回答技巧,这样更有参考价值. 嗯,建议的很对, ...
    
			
    11.