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. java注意的一些细节问题

    1. 大括弧作用域问题 public static void main(String[] args) { { int x; { int x;//编译错误:Duplicate local variabl ...

  2. CRL快速开发框架系列教程一(Code First数据表不需再关心)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  3. 6.JAVA之GUI编程Action事件

    功能:单击一个按钮实现关闭窗口: import java.awt.*; import java.awt.event.*; public class StudyAction { // 定义该图形所需的组 ...

  4. Kafka消息时间戳(kafka message timestamp)

    最近碰到了消息时间戳的问题,于是花了一些功夫研究了一下,特此记录一下.   Kafka消息的时间戳 在消息中增加了一个时间戳字段和时间戳类型.目前支持的时间戳类型有两种: CreateTime 和 L ...

  5. 节省Json流量

    今天在实验当中发现了很不错的节省json流量方式,来做个笔记给大家分享一下. 如果跟服务器传递键值对的数组,我们一般会采用下面方式 创建一个字段 public class kv { public st ...

  6. Ionic2系列——使用DeepLinker实现指定页面URL

    Ionic2使用了近似原生App的页面导航方式,并不支持Angular2的路由.这种方式在开发本地App的时候比较方便,但如果要用来开发纯Web页面就有点问题了,这种情况下Angular2的route ...

  7. 类型转换和类型相关函数.png

  8. 应用SqlGeometry无法加载sqlserverspatial.dll

    最近需要完成一个API,通过用户上传的经纬度判断用户的所在县市省,数据量相对不是很大所以把相关数据全部扔到了内存里知行,主要用到了SqlGeometry, 代码写完后运行本地没问题,扔到服务器上开始报 ...

  9. 网页mp3语音展示,点击图片放大,点击图片跳转链接,调表格

    查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...

  10. 在centos 服务器上安装phalcon框架 undefined symbol: php_pdo_get_dbh_ce

    去git 下载对应版本的框架 命令行: sudo yum install php-devel pcre-devel gcc make 然后使用GIT clone到服务器上,然后 git clone g ...