jquery回到页面顶部按钮
昨天看到一个园友的blog中有个页面下滚后出现用于"回到页面顶部"按钮的效果, 感觉挺不错的, 所以自己也写了一个, 用jQuery写是再简单不过了. 下面就直接给出代码了
1 .scroll-up { 2 background: #dcdcdc url('up.png') no-repeat center center; 3 width:48px !important; /*for ff and other standard browser*/ 4 height:48px !important; 5 _width: 58px; /*for IE6 nonstandard box model*/ 6 _height: 58px; 7 position: fixed; 8 _position: absolute; /*for IE6 fixed bug*/ 9 opacity: .6; 10 filter: Alpha(opacity=60); /*for IE opacity*/ 11 padding:5px; 12 cursor: pointer; 13 display: none; 14 15 /*css3 property for ff chrome*/ 16 border-radius:5px; 17 -webkit-transition-property: background-color, opacity; 18 -webkit-transition-duration: 1s; 19 -webkit-transition-timing-function: ease; 20 21 -moz-transition-property: background-color; 22 -moz-transition-duration: 1s; 23 -moz-transition-timing-function: ease; 24 } 25 .scroll-up:hover { 26 background-color:#B9B9B9; 27 opacity: .8; 28 }
下面是jquery代码
1 ;(function($) { 2 $.scrollBtn = function(options) { 3 var opts = $.extend({}, $.scrollBtn.defaults, options); 4 5 var $scrollBtn = $('<div></div>').css({ 6 bottom: opts.bottom + 'px', 7 right: opts.right + 'px' 8 }).addClass('scroll-up') 9 .attr('title', opts.title) 10 .click(function() { 11 $('html, body').animate({scrollTop: 0}, opts.duration); 12 }).appendTo('body'); 13 14 $(window).bind('scroll', function() { 15 var scrollTop = $(document).scrollTop(), 16 viewHeight = $(window).height(); 17 18 if(scrollTop <= opts.showScale) { 19 if($scrollBtn.is(':visible')) 20 $scrollBtn.fadeOut(500); 21 } else { 22 if($scrollBtn.is(':hidden')) 23 $scrollBtn.fadeIn(500); 24 } 25 26 if(isIE6()) { 27 var top = viewHeight + scrollTop - $scrollBtn.outerHeight() - opts.bottom; 28 $scrollBtn.css('top', top + 'px'); 29 } 30 }); 31 32 function isIE6() { 33 if($.browser.msie) { 34 if($.browser.version == '6.0') return true; 35 } 36 } 37 }; 38 39 /** 40 * -params 41 * -showScale: scroll down how much to show the scrollup button 42 * -right: to right of scrollable container 43 * -bottom: to bottom of scrollable container 44 */ 45 $.scrollBtn.defaults = { 46 showScale: 100, 47 right:10, 48 bottom:10, 49 duration:200, 50 title:'back to top' 51 } 52 })(jQuery); 53 54 $.scrollBtn({ 55 showScale: 200, 56 bottom:20, 57 right:20 58 });
