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>利用 ...
随机推荐
- eclipse 快捷键
Eclipse快捷键大全 Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加) Ctrl+Alt+↑ 复制当前行到 ...
- jquery手写实现单页滚动导航
效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一 ...
- No Entity Framework provider found for the ADO.NET provider with invariant
在使用EF的时候,我把EF的EDMX放在单独的一个project中,UI中引用这个project的dll, 运行的时候就是提示No Entity Framework provider found fo ...
- [转]在MyEclipse中设置struts.xml自动提示功能
导入标签:<%@ taglib uri="/struts-tags" prefix="s" %> 要想在MyEclipse中实现struts.xml ...
- OC编程之道-创建对象之工厂方法
一 何为工厂方法模式?(what) 定义创建对象的接口,让子类决定实例化哪一个类,工厂方法是的一个类的实例化延迟到其子类. 工厂方法创建的对象拥有一组共同的行为,所以往类层次结构中引入新的具体产品并不 ...
- Metro下读取txt文件
情况1:txt是Utf8格式的. 读取代码:IList<String> lines = await Windows.Storage.FileIO.ReadLinesAsync(file); ...
- assign more memory to Gradle
Please assign more memory to Gradle in the project's gradle.properties file.For example, the followi ...
- whose view is not in the window hierarchy
参考:http://www.jianshu.com/p/9e90cb866fdf 在做界面跳转的时候,我们经常会用到这两个函数 func dismissViewControllerAnimated(f ...
- PHP文件上传相关
1.必须通过POST提交 2. 声明 enctype="multipart/form-data" $_FILES {[pic]=array ( [name]=> ...
- SqlServer按时间自动生成生成单据编号
SET @_tmpDateTime = GETDATE() EXEC dbo.Dtw_Common_GenerateProofCode @ProofType = 'SO',@WhsCode=@WhsC ...