您的位置：首页 > Web前端 > JQuery

jquery实现页面滑动例子

2014-04-03 11:54 239 查看

<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script src="jquery-2.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button1').click(function(){
$('body').animate({scrollTop: $("#button2").offset().top}, 1000);
return false;
});
$('#button2').click(function(){
$('body').animate({scrollTop: 0}, 1000);
return false;
});
$('#button3').click(function(){
$('body').animate({scrollTop: 0}, 1000);
return false;
});
})
</script>
</head>
<body>
<input type="button" id="button1" value="111" />
<br>1<br><br><br><br><br>2<br><br><br><br><br><br><br><br>3<br><br><br><br><br><br><br>4<br><br><br><br><br><br><br>3<br><br><br><br><br><br>3<br><br><br><br><br>4<br><br><br><br><br><br><br>5<br><br><br><br><br><br><br><br>3<br><br><br><br><br><br>
<div id="aa">阿布了肯德基</div>
<input type="button" id="button2" value="222" />
<br>1<br><br><br><br><br>2<br><br><br><br><br><br><br><br>3<br><br><br><br><br><br><br>4<br><br><br><br><br><br><br>3<br><br><br><br><br><br>3<br><br><br><br><br>4<br><br><br><br><br><br><br>5<br><br><br><br><br><br><br><br>3<br><br><br><br><br><br>
<input type="button" id="button3" value="333" />
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航