jQuery仿淘宝回顶部和建议代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿淘宝回顶部和建议代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<link type="text/css" href="css/lrtk.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>

<body>
<div id="main" style="width:1000px;padding-top:200px;height:2000px;background:#eee; margin:0 auto;text-align:center">
  <h1>请滚动右侧滚动条查看效果</h1>
</div>

<!-- 代码开始 -->
<div id="tbox">
	<a id="gotop" href="javascript:void(0)"></a>
	<a id="jianyi" target="_blank" href="#"></a>
</div>
<!-- 代码结束 -->

</body>
</html>

JS代码(scrolltopcontrol.js):

//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library:http://www.dynamicdrive.com.//** Available/ usage terms at http://www.dynamicdrive.com (March 30th,09')//** v1.1 (April 7th,09')://** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead.//** 2) Fixes scroll animation not working in Opera.var scrolltotop={
	//startline:Integer. Number of pixels from top of doc scrollbar is scrolled before showing control//scrollto:Keyword (Integer,or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).setting:{
	startline:1,scrollto:0,scrollduration:1000,fadeduration:[500,100]}
,controlHTML:'<img style="margin-right:0px;
	"src="images/top01.png" />',//HTML for control,which is auto wrapped in DIV w/ ID="topcontrol"controlattrs:{
	offsetx:180,offsety:35}
,//offset of control relative to right/ bottom of window corneranchorkeyword:'#top',//Enter href value of HTML anchors on the page that should also act as "Scroll Up" linksstate:{
	isvisible:false,shouldvisible:false}
,scrollup:function(){
	if (!this.cssfixedsupport) //if control is positioned using JavaScriptthis.$control.css({
	opacity:0}
) //hide control immediately after clicking itvar dest=isNaN(this.setting.scrollto)? this.setting.scrollto:parseInt(this.setting.scrollto)if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string existsdest=jQuery('#'+dest).offset().topelsedest=0this.$body.animate({
	scrollTop:dest}
,this.setting.scrollduration);
}
,keepfixed:function(){
	var $window=jQuery(window)var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetxvar controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsetythis.$control.css({
	left:controlx+'px',top:controly+'px'}
)}
,togglecontrol:function(){
	var scrolltop=jQuery(window).scrollTop()if (!this.cssfixedsupport)this.keepfixed()this.state.shouldvisible=(scrolltop>=this.setting.startline)? true:falseif (this.state.shouldvisible && !this.state.isvisible){
	this.$control.stop().animate({
	opacity:1}
,this.setting.fadeduration[0])this.state.isvisible=true}
else if (this.state.shouldvisible==false && this.state.isvisible){
	this.$control.stop().animate({
	opacity:0}
,this.setting.fadeduration[1])this.state.isvisible=false}
}
,init:function(){
	jQuery(document).ready(function($){
	var mainobj=scrolltotopvar iebrws=document.allmainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards modemainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html'):$('body')):$('html,body')mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>').css({
	position:mainobj.cssfixedsupport? 'fixed':'absolute',bottom:mainobj.controlattrs.offsety,right:mainobj.controlattrs.offsetx,opacity:0,cursor:'pointer'}
).attr({
	title:'Scroll Back to Top'}
).click(function(){
	mainobj.scrollup();
	return false}
).appendTo('body')if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below,plus whether control contains any textmainobj.$control.css({
	width:mainobj.$control.width()}
) //IE6- seems to require an explicit width on a DIV containing textmainobj.togglecontrol()$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
	mainobj.scrollup()return false}
)$(window).bind('scroll resize',function(e){
	mainobj.togglecontrol()}
)}
)}
}
scrolltotop.init()

CSS代码(lrtk.css):

/* ת���뱣���Ȩ��Ϣ������ͼ�� www.lanrentuku.com */
*{padding:0px;margin:0px;}
*html{background-image:url(about:blank);background-attachment:fixed;}
/*���IE6�¹�������������*/
#tbox{width:47px;height:73px;float:right;position:fixed;_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));_margin-bottom:10px;}
/*���IE6�²����� position:fixed ������*/
#jianyi{width:47px;height:25px;background:url(../images/suggest.png) no-repeat;position:absolute;bottom:0px;cursor:pointer}
#gotop{width:47px;height:47px;background:url(../images/top01.png) no-repeat;position:absolute;top:0px;display:none;cursor:pointer}
#jianyi:hover{background:url(../images/suggest.png) no-repeat 0px -26px;}
#gotop:hover{background:url(../images/top02.png) no-repeat;}

附件:下载该文件资源,减少时间成本(增值服务)