在網(wǎng)頁中,我們經(jīng)常會由于網(wǎng)頁內(nèi)容過長,而需要在瀏覽網(wǎng)頁時有一個快速回到網(wǎng)頁頂部的功能,在瀏覽網(wǎng)頁內(nèi)容離頂部有一段距離時,出現(xiàn)快速回到網(wǎng)頁頂部的工具,從而能使我們的網(wǎng)頁更人性化。
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:國際域名空間、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設、金林網(wǎng)站維護、網(wǎng)站推廣。以下分為幾個步驟來實現(xiàn):
步驟1:引入jquery庫
步驟2:在網(wǎng)頁中引入回到頂部的網(wǎng)頁元素,并且設置元素的樣式
設置元素樣式,默認開始隱藏#gotop{
display:none;
width:55px;
height:55px;
position:fixed;
right:50px;
bottom:50px;
url(p_w_picpaths /backtop2013.png) no-repeat -70px 0px;
}
步驟3:定義js來控制元素的漸顯、漸隱功能,并且控制網(wǎng)頁滾動條的位置。
function goTop({
$(window).scroll(function(e) {
//若滾動條離頂部大于100元素
if($(window).scrollTop()>100)
$("#gotop").fadeIn(1000);//以1秒的間隔漸顯id=gotop的元素
else
$("#gotop").fadeOut(1000);//以1秒的間隔漸隱id=gotop的元素
});
1};
$(function(){
//點擊回到頂部的元素
$("#gotop").click(function(e) {
//以1秒的間隔返回頂部
$('body,html').animate({scrollTop:0},1000);
});
$("#gotop").mouseover(function(e) {
$(this).css("background","url(p_w_picpaths/backtop2013.png) no-repeat 0px 0px");
});
$("#gotop").mouseout(function(e) {
$(this).css("background","url(p_w_picpaths/backtop2013.png) no-repeat -70px 0px");
});
goTop();//實現(xiàn)回到頂部元素的漸顯與漸隱
});
按照上面的3個步驟,將可以實現(xiàn)回到頂部的功能。
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。