首页>>Jquery文字>>jQuery返回顶部插件jQuery.toTop(2015-06-15)

jQuery返回顶部插件jQuery.toTop

 当长度超过滚动条的高度后会显示 top 按钮

jQuery返回顶部插件jQuery.toTop
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. 1、引入文件  
  2. <script src="jsjquery.min.js"></script>  
  3. <script src="js/jquery.toTop.min.js"></script>  
  4. 2、HTML  
  5. <a class="to-top">返回顶部</a>  
  6. 3、JavaScript  
  7. $('.to-top').toTop();  

 

JavaScript Code
  1. /** 
  2.  *  Plugin Name: jQuery toTop for smoothly Scroll back to Top 
  3.  *  Plugin URL: https://github.com/mmkjony/jQuery.toTop 
  4.  *  Version: 1.1 
  5.  *  Author: MMK Jony 
  6.  *  Author URL: https://github.com/mmkjony 
  7.  *  License: Licensed under MIT 
  8.  **/  
  9.   
  10. (function( $ ){  
  11.     'use strict';  
  12.       
  13.     $.fn.toTop = function(opt){  
  14.           
  15.         //variables  
  16.         var elem = this;  
  17.         var win = $(window);  
  18.         var doc = $('html, body');  
  19.           
  20.         //Extended Options  
  21.         var options = $.extend({  
  22.             autohide: true,  
  23.             offset: 420,  
  24.             speed: 500,  
  25.             position: true,  
  26.             right: 15,  
  27.             bottom: 30  
  28.         }, opt);  
  29.           
  30.         elem.css({  
  31.             'cursor': 'pointer'  
  32.         });  
  33.           
  34.         if(options.autohide){  
  35.             elem.css('display', 'none');  
  36.         }  
  37.           
  38.         if(options.position){  
  39.             elem.css({  
  40.                 'position': 'fixed',  
  41.                 'right': options.right,  
  42.                 'bottom': options.bottom,  
  43.             });  
  44.         }  
  45.           
  46.         elem.click(function(){  
  47.             doc.animate({scrollTop: 0}, options.speed);  
  48.         });  
  49.           
  50.         win.scroll(function(){  
  51.             var scrolling = win.scrollTop();  
  52.               
  53.             if(options.autohide){  
  54.                 if(scrolling > options.offset){  
  55.                     elem.fadeIn(options.speed);  
  56.                 }  
  57.                 else elem.fadeOut(options.speed);  
  58.             }  
  59.               
  60.         });  
  61.           
  62.     };  
  63.       
  64. }( jQuery ));  

 


原文地址:http://www.freejs.net/article_jquerywenzi_472.html