网页_返回顶部

效果：

一：返回顶部脚本

(function ($) {
var goToTopTime;
$.fn.goToTop = function (options) {
var opts = $.extend({}, $.fn.goToTop.def, options);
var $window = $(window);
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix
//$(this).hide();
var $this = $(this);
clearTimeout(goToTopTime);
goToTopTime = setTimeout(function () {
var controlLeft;
if ($window.width() > opts.pageHeightJg * 2 + opts.pageWidth) {
controlLeft = ($window.width() - opts.pageWidth) / 2 + opts.pageWidth + opts.pageWidthJg;
} else {
controlLeft = $window.width() - opts.pageWidthJg - $('.sub-tools').width();
}
var cssfixedsupport = $.browser.msie && parseFloat($.browser.version) < 7; //判断是否ie6
var controlTop = $window.height() - $this.height() - opts.pageHeightJg - 100;
controlTop = cssfixedsupport ? $window.scrollTop() + controlTop : controlTop;
var shouldvisible = ($window.scrollTop() >= opts.startline) ? true : false;

if (shouldvisible) {
$this.stop().show();
} else {
$this.stop().hide();
}
$('.sub-tools').css({
position: cssfixedsupport ? 'absolute' : 'fixed',
top: controlTop,
left: controlLeft
});
}, 30);

$(this).click(function (event) {
$body.stop().animate({ scrollTop: $(opts.targetObg).offset().top }, opts.duration);
$(this).blur();
event.preventDefault();
event.stopPropagation();
});
};

$.fn.goToTop.def = {
pageWidth: 1000, //页面宽度
pageWidthJg: 10, //按钮和页面的间隔距离
pageHeightJg: 100, //按钮和页面底部的间隔距离
startline: 30, //出现回到顶部按钮的滚动条scrollTop距离
duration: 200, //回到顶部的速度时间
targetObg: "body"//目标位置
};
})(jQuery);
$(function () {
$('<div class="sub-tools"><div class="t-wxin" id="moquu_wxin"><a href="javascript:void(0)"><div class="t-wxinh"></div>微信</a></div><a class="t-weibo" href="xxx" target="_blank">微博</a><a class="t-gotop" href="javascript:;" title="返回顶部">返回顶部</a></div>').appendTo("body");
});

二：返回顶部样式

/*回到顶部样式*/
.sub-tools {
height: 122px;
width: 60px;
}
.sub-tools a {
width: 60px;
height: 60px;
text-indent: -9999;
background-image: url(../images/bg-subtools.png);
background-repeat: no-repeat;
display: block;
font-size: 0px;
line-height: 0px;
}
.t-wxin {
position: relative;
z-index: 2;
height: 60px;
width: 60px;
margin-bottom: 1px;
}
.t-wxin a:hover {
background-position: -60px 0px;
}
.t-weibo {
background-position: -0px -60px;
margin-bottom: 1px;
}
.t-weibo:hover {
background-position: -60px -60px;
}
.t-gotop {
background-position: 0px -120px;
}
.t-gotop:hover {
background-position: -60px -120px;
}
.t-wxin a:hover .t-wxinh {
display: block;
}
.t-wxin .t-wxinh {
left: -200px;
top: -50px;
width: 200px;
height: 200px;
display: none;
position: absolute;
background-image: url(../images/bg-weixin.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}

三：脚本引用及触发

<script type="text/javascript" src="/js/gotoTop.js"></script>
<script type="text/javascript">
$(function () {
$(".t-gotop").goToTop();
$(window).bind('scroll resize', function () {
$(".t-gotop").goToTop({
pageWidth: 1020,
duration: 0.3
});
});
});
</script>

四：图片大小120*180

微信图片200*202