一个简单返回顶端的jquery插件
Js代码:
View Code
(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);
调用:
View Code
<script type="text/javascript">$(function () {$('.gotop').gotop({});}); </script> <div class="gotop"><img title="回到顶部" src="go-top.gif" alt="Top"/></div>