js控制div滚动条,滚动滚动条使div中的元素可见并居中
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中的元素可见并居中的更多相关文章
- JS对象 数组排序sort() sort()方法使数组中的元素按照一定的顺序排列。 语法: arrayObject.sort(方法函数)
数组排序sort() sort()方法使数组中的元素按照一定的顺序排列. 语法: arrayObject.sort(方法函数) 参数说明: 1.如果不指定<方法函数>,则按unicode码 ...
- div:给div加滚动栏 div的滚动栏设置
今天做了个样例: div 的滚动栏问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;”>& ...
- 如何使html中的元素不被选中
有时候,为了提高用户的体验度,需要使网页中的部分内容防误操作,不被选中,比如今天的商城项目中的一个细节部分: + —号其实是a标签做的,当连续点击多次,就会使符号被选中,这样感觉起来不太好,于是查找解 ...
- js控制页面每次滚动一屏,和楼梯效果
我最近在做我们公司官网的改版,产品中心就是每次滚一屏的,我觉得加上楼梯更方便用户浏览,就随便写了个demo, 先来看看结构,都很简单的 <!--楼梯--> <ul class=&qu ...
- div图片垂直居中 如何使div中图片垂直居中
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...
- 如何使ul中li元素横向排列且不换行
外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行? 解决方法:主要是外面容器设置为white- ...
- js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示
js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...
- iframe子页面控制父页面滚动高度,直接蹦到父页面开头
zepto调用父页面窗口元素的scrollTop()方法会报错,貌似是scrollTop函数中有个scrollTo()方法用到this,指向错误. 经检查, 原生js控制父页面滚动,只能写数字,不能带 ...
- 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
随机推荐
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(31)-MVC使用RDL报表
系列目录 这次我们来演示MVC3怎么显示RDL报表,坑爹的微软把MVC升级到5都木有良好的支持报表,让MVC在某些领域趋于短板 我们只能通过一些方式来使用rdl报表. Razor视图不支持asp.ne ...
- ASP.NET 5 - $.ajax post JSON.stringify(para) is null
JavaScript 代码: var para = {}; para.id = $("#ad-text-id").val(); para.title = $("#ad-t ...
- 简单动态规划-LeetCode198
题目:House Robber You are a professional robber planning to rob houses along a street. Each house has ...
- Python基础(二)
本章内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典.set集合) for 循环 enumrate range和x ...
- 不懂CSS也能定制博客界面!
之前没想过定制博客界面,毕竟CSS,HTML什么的都不懂,不过看了这篇文章分分钟搞定: [详细图解]一步一步教你自定义博客园(cnblog)界面 我是基于模板BlueSky做了些改动,先看修改前后的效 ...
- Basic Tutorials of Redis(3) -Hash
When you first saw the name of Hash,what do you think?HashSet,HashTable or other data structs of C#? ...
- Navisworks Api Tool
用Google 翻译的..做个参考 None 无有效的选择 Select 选择 SelectBox 选择框 RedlineFreehand 红线写意 RedlineLine 红线线 Redli ...
- [Android下载]北京新版小学英语三年级上册点读手机软件
小学英语三年级上册点读软件.根据2014年北京教改版教材编写,发音标准.实现点读功能.点到哪里读到哪里.哪里不会点哪里!北京教育科学研究院编写,北京出版社出版.ISBN:9787200108781 ...
- Lambda 表达式递归用法实例
注意: 使用Lambda表达式会增加额外开销,但却有时候又蛮方便的. Windows下查找子孙窗口实例: HWND FindDescendantWindows(HWND hWndParent, LPC ...
- Servlet的生命周期及工作原理
Servlet生命周期分为三个阶段: 1,初始化阶段 调用init()方法 2,响应客户请求阶段 调用service()方法 3,终止阶段 调用destroy()方法 Servlet初始化阶段: 在 ...