css代码： 复制代码 代码如下: .scroll-up { background: #dcdcdc url('up.png') no-repeat center center; width:48px !important; /*for ff and other standard browser*/ height:48px !important; _width: 58px; /*for IE6 nonstandard box model*/ _height: 58px; position: fixed; _position: absolute; /*for IE6 fixed bug*/ opacity: .6; filter: Alpha(opacity=60); /*for IE opacity*/ padding:5px; cursor: pointer; display: none; /*css3 property for ff chrome*/ border-radius:5px; -webkit-transition-property: background-color, opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; -moz-transition-property: background-color; -moz-transition-duration: 1s; -moz-transition-timing-function: ease; } .scroll-up:hover { background-color:#B9B9B9; opacity: .8; } 下面是jquery代码 复制代码 代码如下: ;(function($) { $.scrollBtn = function(options) { var opts = $.extend({}, $.scrollBtn.defaults, options); var $scrollBtn = $('<DIV></DIV>').css({ bottom: opts.bottom + 'px', right: opts.right + 'px' }).addClass('scroll-up').attr('title', opts.title) .click(function() { $('html, body').animate({scrollTop: 0}, opts.duration); }).appendTo('body'); // 绑定到window的scroll事件 $(window).bind('scroll', function() { var scrollTop = $(document).scrollTop(), viewHeight = $(window).height(); // 小于配置的显示范围 则fadeOut if(scrollTop <= opts.showScale) { if($scrollBtn.is(':visible')) $scrollBtn.fadeOut(500); // 大于配置的显示范围 则fadeIn } else { if($scrollBtn.is(':hidden')) $scrollBtn.fadeIn(500); } // 解决IE6下css中fixed没有效果的bug if(isIE6()) { var top = viewHeight + scrollTop - $scrollBtn.outerHeight() - opts.bottom; $scrollBtn.css('top', top + 'px'); } }); // 判断是否为IE6 function isIE6() { if($.browser.msie) { if($.browser.version == '6.0') return true; } } }; /** * -params * -showScale: scroll down how much to show the scrollup button * -right: to right of scrollable container * -bottom: to bottom of scrollable container */ $.scrollBtn.defaults = { // 默认值 showScale: 100, // 超过100px 显示按钮 right:10, bottom:10, duration:200, // 回到页面顶部的时间间隔 title:'back to top' // div的title属性 } })(jQuery); $.scrollBtn({ showScale: 200, //下滚200px后 显示按钮 bottom:20, // 靠底部20px right:20 // 靠右部20px }); backToTop.rar

　　推荐阅读

　　jquery随意添加移除html的实现代码

html代码： 复制代码 代码如下: <ul id="list3" class="eventlist"> <li>plain</li> <li class="special">special <button>I am special</button></li> <li>plain</li> </ul> script代码： 复制代码 代码如下: fu>>>详细阅读

本文标题：基于jquery的回到页面顶部按钮

地址：http://www.17bianji.com/kaifa2/JS/24473.html

 1/2    1