一个简单返回顶端的jquery插件
Js代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
(function ($) { $.fn.gotop = function (options) { var settings = $.extend({ 'content': 980, 'bottom': 30, 'margin': "none", 'position': "right", 'scrollTop': 100, 'duration': 700 }, options); var win = $(window); var top = this; //is there some place for my return to the top button? function hasPlace() { var place = true; if (settings.margin == "none") { if (win.width() < (settings.content + (top.width() * 2) + 4)) place = false; } else { if (win.width() < (settings.content + ((top.width() + settings.right) * 2) + 4)) place = false; } return place; } //Put our return to top button at his place function placeTop() { var pos = (((win.width() - settings.content) / 2) - top.width()) / 2; if (settings.position == "left" || settings.position == "l") top.css({ "left": pos + "px" }); else top.css({ "right": pos + "px" }); } //Can we show this button? function showTop() { if (win.scrollTop() > settings.scrollTop) { top.fadeIn(); if ($.browser.msie && ($.browser.version == "6.0")) { var thisTop = win.scrollTop() + win.height() - top.height()- settings.bottom; top.css("top", thisTop + "px"); } } else top.fadeOut(); } if (!hasPlace()) this.hide(); if (settings.margin == "none") placeTop(); else if (settings.position == "left" || settings.position == "l") top.css({ "left": settings.margin + "px" }); else top.css({ "right": settings.margin + "px" }); showTop(); //RESIZE win.resize(function () { if (hasPlace()) top.fadeIn(); else top.fadeOut(); if (settings.margin == "none") placeTop(); }); //SCROLL win.scroll(function () { showTop(); }); if ($.browser.msie && ($.browser.version == "6.0")) { top.css({ "position": "absolute", "cursor": "pointer" }); } else { top.css({ "position": "fixed", "cursor": "pointer", "bottom": settings.bottom + "px" }); } return top .click(function () { $('body,html').animate({ scrollTop: 0 }, settings.duration); }); }; })(jQuery);
调用:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript"> $(function () { $('.gotop').gotop({}); }); </script> <div class="gotop"><img title="回到顶部" src="go-top.gif" alt="Top"/></div>