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>利用 ...
随机推荐
- Cookie使用时需要注意个数及大小限制
各浏览器对Cookie有一定的限制,在使用时需要格外注意. 各浏览器之间对cookie的不同限制: IE6.0 IE7.0/8.0/9.0+ Opera FF Safari Chrome cook ...
- PHP 图片处理工具类（添加水印与生成缩略图）
=================ImageTool.class.php================= <?php class ImageTool { private $imagePath; ...
- nginx实现请求转发
反向代理适用于很多场合,负载均衡是最普遍的用法. nginx 作为目前最流行的web服务器之一,可以很方便地实现反向代理. nginx 反向代理官方文档: NGINX REVERSE PROXY 当在 ...
- 解决 iOS 9.1 微信内置浏览器中html audio 不能自动播放的问题
使用微信现在提供过的微信js-sdk 在ready中进行播放便可. 首先引用js : <script src="http://res.wx.qq.com/open/js/jweixin ...
- 【Network】UDP 大包怎么发？ MTU怎么设置？
这里主要用UDP来发送视频,当发送的数据大于1500时分包发送,保证每包小于1500.发送好办,分割后循环发就可以了,关键是接收时的处理.先做一下处理的方法 :发送时每包上面加上标识,比如RTP的做法 ...
- [Linux]Linux系统调用列表
本文列出了大部分常见的Linux系统调用,并附有简要中文说明. 以下是Linux系统调用的一个列表,包含了大部分常用系统调用和由系统调用派生出的的函数.这可能是你在互联网上所能看到的唯一一篇中文注释的 ...
- SAP 销售订单的文本项目
http://blog.itpub.net/9859323/viewspace-616508/ ls_hdname = wa_vbak-vbeln . CALL FUNCTION 'READ_ ...
- Python之路,Day2 - Python基础2
def decode(self, encoding=None, errors=None): """ 解码 """ ""& ...
- http协议和web应用有状态和无状态浅析
http协议和web应用有状态和无状态浅析 (2013-10-14 10:38:06) 转载▼ 标签: it 我们通常说的web应用程序的无状态性的含义是什么呢? 直观的说,“每次的请求都是独立的 ...
- unity3d中串口的使用
工作中遇到了串口的问题,通过查资料&实验写出了下面代码: 关于串口的代码我在网上看了好多,一种是用事件来做,另外一种使用线程来做:(经过试验,unity无法用串口自带的事件进行数据读取): 看 ...