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. 【Win 10 应用开发】透视效果

    所谓透视效果,就是在平面坐标空间上模拟出“好像”三维的效果.要是老周没有记错的话,以前在写WP8相关的内容时写过,UWP中的透视方法也保留了以前的Do法,其实这玩意儿是从 Silverlight 沿袭 ...

  2. Dom addEventlistener与id 绑定事件的区别(续)

    addEventListener 第三个参数为 useCapture. 以一个例子说明. <div id="div1" style="background: blu ...

  3. 多线程条件通行工具——CyclicBarrier

    CyclicBarrier的作用是,线程进入等待后,需要达到一定数量的等待线程后,再一次性开放通行. CyclicBarrier(int, Runnable)构造方法,参数1为通行所需的线程数量,参数 ...

  4. [摘录]第三部分 IBM文化(1)

    第二十章 论公司文化如果是在20世纪90年代初期,当一个人看见或者听到“IBM”时,他会联想到什么呢?或许是“大计算机”.“个人电脑”或者“ThinkPads”.但是,他们同时也必然会想到“大公司”. ...

  5. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  6. 现代3D图形编程学习-环境设置

    本书系列 现代3D图形编程学习 环境设置 由于本书中的例子,均是基于OpenGL实现的,因此你的工作环境需要能够运行OpenGL,为了读者能够更好的运行原文中的示例,此处简单地介绍了linux和win ...

  7. PHP之封装一些常用的工具类函数

    分享一些PHP中常用的工具里函数: <?php /** * Created by PhpStorm. * User: Steven * Date: 2016/8/12 * Time: 14:21 ...

  8. C# - 多线程 之 信号系统

    基础概览 多线程之信号系统命名空间 using System.Threading; 线程同步类的继承层次关系图 终止状态和非终止状态 在终止状态下,被WaitOne()阻塞的线程会逐个得到释放.如果一 ...

  9. Amazon Interview | Set 27

    Amazon Interview | Set 27 Hi, I was recently interviewed for SDE1 position for Amazon and got select ...

  10. python学习笔记(python简史)

    一.python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum) 目前python主要应用领域: ·云计算 ·WEB开发 ·科学运算.人工智能 ·系统运维 ·金融:量化交 ...