1.html代码如下

<div id="panel">
<div id="div1"></div>
<div id="div2"></div>
<a name="div3Anchor"> </a>
<div id="div3"></div>
</div>

2.js滚动div到div3

 panel = document.getElementById("panel");
div3 = document.getElementById("div3");
panel.scrollTop = div3.offsetTop;

3.js平滑滚动div到div3,滚动到居中的位置

var panel = $("#panel");
var div3 = document.getElementById("div3");
panel.animate({
scrollTop:div3.offsetTop - panel.height()/2
},200);

js控制div滚动条,滚动滚动条使div中的元素可见并居中的更多相关文章

  1. JS对象 数组排序sort() sort()方法使数组中的元素按照一定的顺序排列。 语法: arrayObject.sort(方法函数)

    数组排序sort() sort()方法使数组中的元素按照一定的顺序排列. 语法: arrayObject.sort(方法函数) 参数说明: 1.如果不指定<方法函数>,则按unicode码 ...

  2. div:给div加滚动栏 div的滚动栏设置

    今天做了个样例: div 的滚动栏问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;”>& ...

  3. 如何使html中的元素不被选中

    有时候,为了提高用户的体验度,需要使网页中的部分内容防误操作,不被选中,比如今天的商城项目中的一个细节部分: + —号其实是a标签做的,当连续点击多次,就会使符号被选中,这样感觉起来不太好,于是查找解 ...

  4. js控制页面每次滚动一屏,和楼梯效果

    我最近在做我们公司官网的改版,产品中心就是每次滚一屏的,我觉得加上楼梯更方便用户浏览,就随便写了个demo, 先来看看结构,都很简单的 <!--楼梯--> <ul class=&qu ...

  5. div图片垂直居中 如何使div中图片垂直居中

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

  6. 如何使ul中li元素横向排列且不换行

    外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行? 解决方法:主要是外面容器设置为white- ...

  7. js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示

    js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...

  8. iframe子页面控制父页面滚动高度,直接蹦到父页面开头

    zepto调用父页面窗口元素的scrollTop()方法会报错,貌似是scrollTop函数中有个scrollTo()方法用到this,指向错误. 经检查, 原生js控制父页面滚动,只能写数字,不能带 ...

  9. 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

随机推荐

  1. 如果没有Visual Studio 2015,我们如何创建.NET Core项目 ?

    对于.NET开发人员来说,我们已经习惯了VS这个世界上最强大的IDE,所以对他们来说,项目的创建直接利用安装到VS中相应的项目模板即可.当.NET Core跨出了Windows的围栏,正式拥抱其他平台 ...

  2. 4. ValueStack 和 OGNL

    1. 属性哪来的 当我们通过Action处理完用户请求以后,可以直接在页面中获取到 action 的属性值. 如果我们在页面中尝试遍历四个域中的属性,会发现域中并没有username之类的Action ...

  3. Django:手把手带你入门

    一.开发环境: Python:2.7:PyCharm 4 二.Django的安装: 打开Pycharm --> 新建项目--> 看图操作--> 自动安装Django环境 三.创建第一 ...

  4. ASP.NET Core 中文文档 第三章 原理(3)静态文件处理

    原文:Working with Static Files 作者:Rick Anderson 翻译:刘怡(AlexLEWIS) 校对:谢炀(kiler398).许登洋(Seay).孟帅洋(书缘) 静态文 ...

  5. window下使用Redis Cluster部署Redis集群

    日常的项目很多时候都需要用到缓存.redis算是一个比较好的选择.一般情况下做一个主从就可以满足一些比较小的项目需要.在一些并发量比较大的项目可能就需要用到集群了,redis在Windows下做集群可 ...

  6. WPF DataGrid 行选中相关

    DataGrid选中行是有自带SelectionChanged的,可是当需要重复选中同一行时,该事件就不会触发了. 后来反复查资料找到了DataGrid上有个DataGridRow. DataGrid ...

  7. Aspose.Cells导出Excel(1)

    利用Aspose.Cells导出excel 注意的问题 1.DataTable的处理 2.进行编码,便于中文名文件下载 3.别忘了Aspose.Cells.dll(可以自己在网上搜索) public ...

  8. JVM 架构解读

    每个Java开发人员都知道字节码由JRE(Java运行时环境)执行.但许多人不知道JRE是Java Virtual Machine(JVM)的实现,它分析字节码,解释代码并执行它.作为开发人员,我们应 ...

  9. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

  10. 【原】Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作

    1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1.3)服务端要用MVC框架,要Rest风格 1.4)数据访问要用ORM 2.效果: 2.1)列表 2.2) ...