你的位置:首页 > Java教程

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


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

<!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/