点击某个按钮，页面平滑到顶部和居底，这个功能应用太广了，实现它我们是基于jQuery来实现，不熟悉的童鞋可以一起来学下咯。
实现这个功能的代码很简单，其核心主要在jQuery部分，这里就不啰嗦了，直接贴上代码。
页面居底：
我们创建一个html页面，点击按钮页面平滑到底部：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基于jQuery点击事件之居底 - Web前端之家</title>
<style type="text/css">
.demoHeight{height:1400px;background:#f0f0f0}
.scrollToBottom{position:fixed;right:10px;top:50%;margin-top:-30px;width:80px;height:60px;line-height:60px;text-align:center;background:#000;color:#fff;font-size:14px｝
</style>
</head>
<body>
<a href="javascript://" class="scrollToBottom">点击我</a>
<div class="demoHeight">页面高度</div>
<script type="text/javascript" src="/demo/js/jq.js"></script>
<script type="text/javascript">
$(function(){
$('.scrollToBottom').click(function(){
$('html,body,.content').animate({scrollTop:$(document).height()},300);
return false;
});
})
</script>
</body>
</html>它是如何工作的：
当连接的.scrollToBottom类被点击的时候执行{}里面的动。
$(document).ready(function(){
$('.scrollToBottom').click(function(){
$('html,body,.content').animate({scrollTop:$(document).height()},300);
return false;
}
});当一个链接被点击的代码将在函数内部运行，scrollTop的功能是使用平滑滚动效果。上面的代码将滚动到页面底部，使用窗口的高度，以确定底部高度。数字300是平滑的速度，看项目需求而定。
页面置顶
我们创建一个html页面，点击按钮页面平滑到底部：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基于jQuery点击事件之置顶 - Web前端之家</title>
<style type="text/css">
.demoHeight{height:2000px;background:#f0f0f0}
.scrollToTop{position:fixed;right:10px;top:50%;margin-top:-30px;width:80px;height:60px;line-height:60px;text-align:center;background:#000;color:#fff;font-size:14px｝
</style>
</head>
<body>
<div class="demoHeight">页面高度</div>
<a href="javascript://" class="scrollToTop">点击我</a>
<script type="text/javascript" src="/demo/js/jq.js"></script>
<script type="text/javascript">
$(function(){
$('.scrollToTop').click(function(){
$('html,body,.content').animate({scrollTop:0},300);
return false;
});
})
</script>
</body>
</html>它是如何工作的：
当在页面加载类.scrollToTop的链接被点击时的jQuery将执行：
$('html, body').animate({scrollTop:0},300);
return false;.animate()方法使我们能够创建任何数字的CSS属性的动画效果，scrollTop的功能设置为0，这代表了滚动条在最上方的位置，“数字300是平滑的速度。
刚才忘记说明一点：
return false;对于这句代码，我们是防止的默认动作被触发的事件，在我们的例子中，它可以防止用户链接，但方法不只是这一种，我们也可以使用event.preventDefault();
总结
基于jQuery点击事件之置顶和居底的功能是不是很简单呢，希望大家能掌握，更多学习，请持续关注Web前端之家。
网友评论文明上网理性发言 已有1人参与
发表评论:
评论列表