夏日博客

A-A+

一个简单的返回顶部jQuery程序代码

2016年01月08日 前端设计 暂无评论 阅读 4 views 次

返回顶部对于使用js来写那是很难很难的，至少对于小编来讲，但是对于jquery来说是非常的简单了，只需要一段代码即可，具体下面看例子。

本文演示jQuery返回顶部，当文章页比较长时间，可以方便用户返回网站的顶部，实现代码也不难，大家学习下！

调用代码如下:

  1. <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>  
  2. <script language="javascript" type="text/javascript" src="scrollSilde.js"></script>  
  3. <script language="javascript" type="text/javascript" >  
  4.     $(function () {  
  5.         $(window).gotoTop({  
  6.             showHeight: 150, //设置滚动高度时显示  
  7.             speed: 200 //返回顶部的速度以毫秒为单位  
  8.         });  
  9.     });  
  10. </script>  

其中scrollSilde.js代码为:

  1. //返回顶部  
  2. $(function () {  
  3.     $.fn.gotoTop = function (options) {  
  4.         var defaults = {  
  5.             showHeight: 150,  
  6.             speed: 1000  
  7.         };  
  8.         var options = $.extend(defaults, options);  
  9.         $(document.body).prepend("<div id='totop'><a></a><p></p></div>");  
  10.         var $toTop = $(this);  
  11.         var $top = $("#totop");  
  12.         var $ta = $("#totop a");  
  13.         var $bt = $("#totop p");  
  14.         $toTop.scroll(function () {  
  15.             var scrolltop = $(this).scrollTop();  
  16.             if (scrolltop >= options.showHeight) {  
  17.                 $top.show();  
  18.             }  
  19.             else {  
  20.                 $top.hide();  
  21.             }  
  22.         });  
  23.         $ta.click(function () {  
  24.             $("html,body").animate({ scrollTop: 0 }, options.speed);  
  25.         });  
  26.         $bt.click(function () {  
  27.             $("#mess").show();  
  28.         });  
  29.     }  
  30. });  

好了这样就可以了实现页面返回顶部了。

标签：

给我留言