JQuery控制滚动条滚动到指定位置
2024-08-27 19:27:32
<!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
最新文章
- 第一届山东省ACM——Balloons（java）
- MyBatis框架在控制台打印Sql语句-遁地龙卷风
- 使用adagio包解决背包问题
- W3School-CSS 尺寸 (Dimension) 实例
- 响应式编程 Part.01 （Layout and MVVM）
- NSInvocation
- Spring声明式事务（xml配置事务方式）
- script标签的位置
- Python 判断闰年，判断日期是当前年的第几天
- python functools.lru_cache做备忘功能
- MySQLdb、 flask-MySQLdb 、MySQL-python 安装失败
- 一张图片快速明白Python概述
- 关于最小生成树，拓扑排序、强连通分量、割点、2-SAT的一点笔记
- iPhone手机怎么投屏到电脑 airplay在哪里设置
- XSS-HTML&javaSkcript&CSS&jQuery&ajax-CSS
- 外卖ERP管理系统(一)
- Cocos Creator脚本开发事例
- Linux学习: LCD驱动
- sql计算总页数
- shiro配置unauthorizedUrl，无权限抛出无权限异常，但是不跳转