jQuery控制滚动条滚动到指定位置
2016-07-01 17:40
417 查看
<!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插件简单学习实例教程
- jquery插件autocomplete用法示例
- JavaScript强化教程——jQuery选择器
- JavaScript强化教程——jQuery选择器
- jQuery获取输入框并设置焦点
- jQuery实现复选框选中自动填充数据
- HTML Select 标签选择后触发jQuery事件代码实例
- 使用jquery获取父元素及父元素以上元素的方法
- 表格中用Jquery获取双击行的某列的值
- .net web开发基础知识总结
- jquery的ajax缓存
- jQuery弹出层效果
- jQuery 2.0.3 源码分析core - 选择器
- jquery.ajaxfileupload.js 问题汇总
- jquery合并单元格
- jquery 获取鼠标位置
- jquery弹幕效果
- jQuery 2.0.3 源码分析core - 整体架构
- jQuery Mobile基础学习(2)(控件)