“返回顶部”实现一例.doc

PAGE/NUMPAGES

“返回顶部”实现一例

网页中,返回顶部很普遍.现有一例子，主要靠图片+Ｊquery＋CSS来完成：

效果有以下几个方面：

１、页面在顶部或滚动到顶部时，“返回顶部图片隐藏

2、当页面向下滚动时，“返回顶部”图片显现

３、鼠标未在“返回顶部”图片上面时，图片是灰的

4、鼠标移到“返回顶部”图片上面时,图片置亮（红色)

方法和代码如下：

１、有图片(/iｍg/ｂａck_ｔｏp.png）：

2、JＳ代码

/＊返回顶部*／

vａrrｉｇｈt=（$(wiｎdｏw)．widtｈ（）-1070）/2+px”；

var＄baｃkToTｏpTxt=返回顶部”

,$bａｃｋＴoTopElｅ=＄(〈dｉvｉｄ=”ｄivBacｋTop”＞／div〉’）。apｐendTo（$（bｏｄy”))。csｓ（right，ｒｉgｈt）。aｔtr（＂titｌe”,$backToＴopＴｘt)。clicｋ（funｃtion(）｛＄（”html,bｏdｙ).aｎimaｔe（｛scrolｌTop：0｝,120）;｝)

，$backTｏTｏｐFun=funcｔion（）｛

vａrst=$(ｄocｕｍeｎt)。ｓcｒoｌlTop(),wｉnh=$(wｉndow)．heigｈt(）;

（sｔ0）？$bacｋToTopＥｌe。fadeIn（20０0):＄backＴｏTopEle．fａdeＯut(2000）；

//ＩE6下的定位

iｆ（!window．XMLＨttpRｅqｕest){

$bａckToＴopEｌe.css(ｔop＂，ｓt+winh-１6６)；

}

｝;

＄baｃkＴoTopEle.mousｅover(ｆｕｎction（）{$ｂaｃkTｏToｐEle.remoｖeClaｓs(）；＄backToＴｏｐEle。addClass(”gtｏp2＂);}）;

$ｂaｃkＴoＴｏpEｌe。ｍouｓeout(function（){＄baｃkＴoTopElｅ。removeClａss（)；＄bａckToTopEle．adｄＣlass（”gtoｐ”）；｝）；

$（ｗiｎdow)。ｂind（scｒoll，$bacｋToTｏpFｕn）；

＄(function（){

$ｂackToTｏpＦun（)；

}）;

3、CSＳ

＃ｄivBaｃkTｏｐ{

dｉspｌａy：nonｅ;

wｉdth：4５ｐx;

ｈeigｈt:4５px；

ｂacｋｇrouｎd:url(/img／back_ｔop.pｎg）no－repeatleｆtcｅｎter;

position:fixed;

_pｏsitiｏn：absolute;

rｉght：10px;

bottｏm:1０0pｘ；

＿bｏｔtｏｍ:＂aｕｔo”;

ｃursoｒ：pointer;

｝

。ｇtop｛bａｃkgrｏund：ｕrl(/iｍg/bacｋ_top.ｐng）no-ｒepeａｔlｅftｃｅnter！impｏrtant;}

.ｇtoｐ2｛bacｋgroｕｎd:uｒｌ（/img/back＿top．pnｇ)no－ｒｅpeatrｉｇhtceｎter！importａnt；｝

HYPERＬＩNK\ｌ＂”ＨYPＥRLINK\ｌHＹPERLIＮK\ｌ＂HＹPERLINK\l”HYPＥＲLIＮK\l”ＨYPEＲＬINK\l”

文中不足之处，请您见谅！