JQuery控制滚动条滚动到指定位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.redMark{
color: red;
font-weight: bold;
}
.blueMark{
color: blue;
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
function scrollToError() {
var body = $('html,body');
var scroll_1 = $('.try').first();
var scroll_2 = $('#test');
if(scrollTo.length) {
body.animate({scrollTop:scroll_1.offset().top - 100 }, 2000);
body.animate({scrollTop:scroll_2.offset().top - 100 }, 2000);
}
}
</script>
</head>
<body>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p class='try redMark'>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p id='test' class='blueMark'>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p class='try redMark'>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<input type="submit" onclick="scrollToError()" value="Scroll Action"/>
</body>
</html>
更多参考：http://www.cnblogs.com/yichengbo/archive/2011/10/24/2222638.html
JQuery控制滚动条滚动到指定位置的更多相关文章
- jquery操作滚动条滚动到指定位置
<html><head><script type="text/javascript" src="/jquery/jquery.js" ...
- Vue如何引入jquery实现平滑滚动到指定位置效果
在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...
- DIV滚动条滚动到指定位置（jquery的position()与offset()方法区别小记）
相对浏览器,将指定div滚到到指定位置,其用法如下 $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...
- jQuery实现将div中滚动条滚动到指定位置的方法
1.JS代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainCo ...
- DIV内滚动条滚动到指定位置
相对浏览器,将指定div滚到到指定位置,其用法如下: $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...
- 控制webbrowser滚动到指定位置
在构造函数中添加事件: webBrowser.DocumentCompleted+=new WebBrowserDocumentCompletedEventHandler(webBrowser_Doc ...
- jquery操作滚动条滚动到指定元素位置 scrollTop
$('.brand_t a').bind('click',function(){ if($(this).attr('title1')){ var toChar = $(this).attr('titl ...
- js将滚动条滚动到指定位置的方法
代码如下(主要是通过设置Location的hash属性): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- 利用jquery制作滚动到指定位置触发动画
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...
随机推荐
- GET和POST可传递的值到底有多大？
前日,看到这个问题了. 没有深入了解.我的常识里面get最大传递的值为256b,post 是2M.这是很久以前不知在哪看到的.于是又百度一下.看到两篇文章装过来看看: 浅谈 HTTP中Get与Post ...
- Java中的BoneCP数据库连接池用法
http://zhoufoxcn.blog.51cto.com/792419/438277/ C3P0,Proxool,BoneCP,Druid
- 3.从Node.js操作MongoDB文档
1.更新文档结构,而非SQL 2.数据库更新运算符 在MongoDB中执行对象的更新时,需要确切的指定需要改变什么字段.需要如何改变.不像SQL语句建立冗长的查询字符串来定义更新. MongoDB中可 ...
- POJ 1780 Code（有向图的欧拉通路）
输入n(1<=n<=6),输出长度为10^n + n -1 的字符串答案. 其中,字符串以每n个为一组,使得所有组都互不相同,且输出的字符串要求字典序最小. 显然a[01...(n-1)] ...
- 严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderLis
一个让我崩溃的问题 感谢:http://blog.csdn.net/itlionwoo/article/details/17523371
- vim for windows 简介
普通人的编辑利器--VIM (for windows) 本文转载自 FROM Vincent_czz2005年5月,我开始用VIM.此后渐入佳境,原来因版权自律而放弃盗版UltraEdit的遗憾一扫而 ...
- SQL入门语句之INSERT、UPDATE和DELETE
一.SQL入门语句之INSERT insert语句的功能是向数据库的某个表中插入一个新的数据行 1.根据对应的字段插入相对应的值 insert into table_name(字段A, 字段B, 字段 ...
- 自动换行 lable换行 div换行 span换行 label换行
label word-break: break-all; white-space: normal;
- 基于Netty4的HttpServer和HttpClient的简单实现
Netty的主页:http://netty.io/index.html 使用的Netty的版本:netty-4.0.23.Final.tar.bz2 ‐ 15-Aug-2014 (Stable, Re ...
- Linux 第04天
Linux 第04天 1.系统设置工具(网络和打印机)和硬件检测 1.1 setup工具 1.1.1 用户身份验证设置 1.1.2 网络配置 1.1.3 防火墙设置 1.1.4 键盘形式设置 1.1. ...