向下滚动一定距离出现返回顶部按钮代码实例

向下滚动一定距离出现返回顶部按钮代码实例:
返回顶部按钮在很多网站都有应用，也确实非常的人性化，但是有些网站可能会更进一步，那就是在默认状态下，返回顶部按钮在默认状态下是隐藏的，只有向下拖动滚动条一定的距离，按钮才会显示，下面就通过代码实例介绍一下如何实现此功能。
代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
body{
  margin:0px;
  padding:0px;
  height:1500px;
}
.top{
  width:50px;
  height:50px;
  background:green;
  position:fixed;
  right:5px;
  bottom:20px;
  display:none;
}
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">
$(function(){
  $(window).bind('scroll',function(){
    if($(document).scrollTop()>200){ 
      $(".top").show(); 
    }
    else{ 
      $(".top").hide(); 
    } 
  }) 
  $(".top").click(function(){ 
    $('body,html').animate({scrollTop:0},1000); 
  }) 
}) 
</script>
</head> 
<body> 
<div class="top"></div>
</body> 
</html>

上面的代码实现了我们的要求，下面介绍一下此效果的实现过程。
一.实现原理:
返回顶部的按钮通常是固定在网页的右下侧，这样我们可以设置按钮的定位方式为position:fixed，然后通过定位方式将其固定于右下角，同时将其设置为不可见状态。当向下拖动滚动条的时候，当到达指定的位置，那么就将其设置为可见，点击按钮可以是网页返回顶部，当向下拖动的距离小于指定的距离，此按钮又会被隐藏，更多内容可以看代码注释。
二.代码注释:
1.$(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
2.$(window).bind('scroll',function(){})，问窗口注册scroll事件处理函数，也就是拖动滚动条的时候能够触发指定的函数。
3.if($(document).scrollTop()>200){$(".top").show();}，当网页向上固定的距离超过200px，那么就显示按钮。
4.else{$(".top").hide();}，否则将会隐藏按钮。
5. $(".top").click(function(){$('body,html').animate({scrollTop:0},1000);})，为按钮注册click事件处理函数，事件处理函数能够以动画方式将scrollTop属性值在1秒内设置为0，也就是滚动到顶部。
三.相关阅读:
1.bind()函数可以参阅javascript的bind()函数用法详解一章节。
2.scrollTop()函数可以参阅jQuery的scrollTop()函数用法详解一章节。
3.animate()函数可以参阅jQuery的animate()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14259

更多内容可以参阅:http://www.softwhy.com/jquery/

爱程序网

Tags：[db:关键字]