返回頂部樣式css,h5返回頂部

如何為網(wǎng)頁添加返回頂部按鈕

1、純js,無動畫版本

創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設(shè)|網(wǎng)站維護(hù)公司|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計與制作經(jīng)驗，為許多企業(yè)提供了網(wǎng)站定制設(shè)計服務(wù)，案例作品覆蓋成都效果圖設(shè)計等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身策劃品質(zhì)網(wǎng)站。

[html] view plain copy

window.scrollTo(x-coord, y-coord);

[html] view plain copy

如：window.scrollTo(0,0);

2、純js，帶動畫版本

生硬版：

[html] view plain copy

var scrollToTop = window.setInterval(function() {

var pos = window.pageYOffset;

if ( pos 0 ) {

window.scrollTo( 0, pos - 20 ); // how far to scroll on each step

} else {

window.clearInterval( scrollToTop );

}

}, 16); // how fast to scroll (this equals roughly 60 fps)

流暢版：

[html] view plain copy

(function smoothscroll(){

var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;

if (currentScroll 0) {

window.requestAnimationFrame(smoothscroll);

window.scrollTo (0,currentScroll - (currentScroll/5));

}

})();

3、jQuery,帶動畫版本

首先需要在頂部添加如下html元素：

[html] view plain copy

span style="font-size:14px"p id="back-to-top"a href="#top"span/span返回頂部/a/p

/span

其中a標(biāo)簽指向錨點(diǎn)top，可以在頂部防止一個a name="top"/a的錨點(diǎn)，這樣在瀏覽器不支持js時也可以實現(xiàn)返回頂部的效果了。

要想讓返回頂部的圖片顯示在右側(cè)，還需要一些css樣式，如下：

[css] view plain copy

span style="font-size:14px"/*returnTop*/

p#back-to-top{

position:fixed;

display:none;

bottom:100px;

right:80px;

}

p#back-to-top a{

text-align:center;

text-decoration:none;

color:#d1d1d1;

display:block;

width:64px;

/*使用CSS3中的transition屬性給跳轉(zhuǎn)鏈接中的文字添加漸變效果*/

-moz-transition:color 1s;

-webkit-transition:color 1s;

-o-transition:color 1s;

}

p#back-to-top a:hover{

color:#979797;

}

p#back-to-top a span{

background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;

border-radius:6px;

display:block;

height:64px;

width:56px;

margin-bottom:5px;

/*使用CSS3中的transition屬性給span標(biāo)簽背景顏色添加漸變效果*/

-moz-transition:background 1s;

-webkit-transition:background 1s;

-o-transition:background 1s;

}

#back-to-top a:hover span{

background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;

}

/span

上面樣式中的背景圖片是雪碧圖，下面提供兩個單獨(dú)的返回頂部圖片方便朋友們使用：

有了html和樣式，我們還需要用js控制返回頂部按鈕，在頁面滾動時漸隱漸現(xiàn)返回頂部按鈕。

[html] view plain copy

script src=""/script

script

$(function(){

//當(dāng)滾動條的位置處于距頂部100像素以下時，跳轉(zhuǎn)鏈接出現(xiàn)，否則消失

$(function () {

$(window).scroll(function(){

if ($(window).scrollTop()100){

$("#back-to-top").fadeIn(1500);

}

else

{

$("#back-to-top").fadeOut(1500);

}

});

//當(dāng)點(diǎn)擊跳轉(zhuǎn)鏈接后，回到頁面頂部位置

$("#back-to-top").click(function(){

//$('body,html').animate({scrollTop:0},1000);

if ($('html').scrollTop()) {

$('html').animate({ scrollTop: 0 }, 1000);

return false;

}

$('body').animate({ scrollTop: 0 }, 1000);

return false;

});

});

});

/script

html css JS 怎么設(shè)計點(diǎn)擊回頂部效果？

點(diǎn)擊回頂部，或是回某個位置，主要是設(shè)置scrollTop。

下面是一個簡單回頂?shù)睦樱?/p>

下面的例子是緩慢回頂。如果將快速回頂，可以直接讓scrollTop = 0；就可以了。

style????

body{height:5000px;}????

input?{position:fixed;?bottom:0px;?right:0px;}????

/style????

script????

window.onload=function(){????

var?oBtn?=?document.getElementById('btn');????

var?timer?=?null;????

var?bFlag?=?false;????

oBtn.onclick=function(){????

moveScroll(0,3000);

};????

window.onscroll=function(){????

if(bFlag)????

{????

clearInterval(timer);????

}

bFlag=true;????

};????

function?moveScroll(target,time)????

{????

var?start?=?document.documentElement.scrollTop?||?document.body.scrollTop;????

var?dis?=?target?-?start;????

var?count?=?Math.floor(time/30);????

var?n=0;????

clearInterval(timer);????

timer?=?setInterval(function(){????

n++;????

bFlag=false;????

document.documentElement.scrollTop?=?start?+?dis*n/count;????

document.body.scrollTop?=?start+dis*n/count;????

if(n==count)????

{????

clearInterval(timer);????

}

},30);????

}????

};????

/script

用純CSS制作返回頂部的滑動效果

要有那個滑上去過度，不用JS你別想了，不用JS只能一點(diǎn)鏈接一下就跳到頁頭去。

html css 返回頂部按鈕位置怎么固定？

可以使用相當(dāng)于瀏覽器定位。css樣式中寫入：

{position: fixed;

right: 20px;

bottom: 100px; }相當(dāng)于瀏覽器右邊20px，瀏覽器底部100px的距離的定位。

fixed總是以body為定位時的對象，總是根據(jù)瀏覽器的窗口來進(jìn)行元素的定位，通過"left"、 "top"、 "right"、 "bottom" 屬性進(jìn)行定位。

css 當(dāng)鼠標(biāo)點(diǎn)擊插入的圖片時網(wǎng)頁回到頭部

js吧

網(wǎng)頁編程中時常會用到返回網(wǎng)頁頂部代碼，返回頂部方法只有兩種：一種是直接跳轉(zhuǎn)到頂部，二是采用JS添加滾動效果，關(guān)于代碼方面，天緣一貫的理念，少寫點(diǎn)廢話，盡量在代碼量和體驗方面尋求平衡，與其花大力氣寫個二三十行代碼去返回頂部，不如把精力放在改善網(wǎng)站內(nèi)容方面。

一、使用錨標(biāo)記

此方法最簡單，只需在body下放個隱藏的錨點(diǎn)標(biāo)記，內(nèi)容如下：

代碼如下

復(fù)制代碼

a name="top" id="top"/a

然后，在網(wǎng)頁底部放一個訪問鏈接即可：

代碼如下

復(fù)制代碼

a href="#top" target="_self"返回頂部/a

此方法效果是一次直接跳到頂部，而且URL地址欄會顯示個#top，追求完美的可使用下面方法。

二、使用JS scrollTo函數(shù)

javascript scroll函數(shù)（scrollBy scrollTo）是用來滾動頁面到指定位置，格式定義如下：

■scrollBy(xnum,ynum)

■scrollTo(xpos,ypos)

其中：

■xnum，ynum分別指水平、垂直滾動多少像素，正值表示向右或向下滾動，負(fù)值表示向左或向上滾動

■xpos，ypos分別指水平和垂直坐標(biāo)

使用示例：

代碼如下

復(fù)制代碼

a href="javascript:scrollTo(0,0);"返回頂部/a

三、scrollBy慢速滾動返回頂部

本方式使用上面提到的scrollBy函數(shù)，每次只滾動定量像素，整體看起來有點(diǎn)滾動效果，代碼如下：

代碼如下

復(fù)制代碼

var sdelay=0;

function returnTop() {

window.scrollBy(0,-100);//Only for y vertical-axis

if(document.body.scrollTop0) {

sdelay= setTimeout('returnTop()',50);

}

}

scrollBy函數(shù)第二個參數(shù)我設(shè)了-100，越大（比如-10）滾動越慢，越小滾動越快，啟動滾動只需在頁面底部加個鏈接：

代碼如下

復(fù)制代碼

a href="javascript:returnTop();"返回頂部/a

JQuery實現(xiàn)返回頂部功能

首先需要在頂部添加如下html元素：

p id="back-to-top"a href="#top"span/span返回頂部/a/p

其中a標(biāo)簽指向錨點(diǎn)top，可以在頂部防止一個a name="top"/a的錨點(diǎn)，這樣在瀏覽器不支持js時也可以實現(xiàn)返回頂部的效果了。

css3中怎么做返回頂部

重點(diǎn)是go-top的CSS定義：

div.go-top { display: none;

opacity: 0.6;

z-index: 999999;

position: fixed;

bottom: 113px;

left: 90%;

margin-left: 40px;

border: 1px solid #a38a54;

width: 38px;

height: 38px;

background-color: #eddec2;

border-radius: 3px;

cursor: pointer;}div.go-top:hover { opacity: 1;

filter: alpha(opacity=100);}div.go-top div.arrow { position: absolute;

left: 10px;

top: -1px;

width: 0;

height: 0;

border: 9px solid transparent;

border-bottom-color: #cc3333;}div.go-top div.stick { position: absolute;

left: 15px;

top: 15px;

width: 8px;

height: 14px;

display: block;

background-color: #cc3333;

-webkit-border-radius: 1px;

-moz-border-radius: 1px;

border-radius: 1px;}

使用fixed定位，讓按鈕始終出現(xiàn)在右下角，通過設(shè)定left:90%可以使按鈕在右方出現(xiàn)，但又不會太緊貼滾動條。

按鈕默認(rèn)不可見，當(dāng)滾動頁面到一定高度后，按鈕出現(xiàn)，這里用jQuery實現(xiàn)

$(function() { $(window).scroll(function() { if ($(window).scrollTop() 1000) $('div.go-top').show(); else

$('div.go-top').hide();

}); $('div.go-top').click(function() { $('html, body').animate({scrollTop: 0}, 1000);

});

});

當(dāng)按下按鈕時，有動畫效果返回頂部

文章標(biāo)題：返回頂部樣式css,h5返回頂部
本文來源：http://muchs.cn/article4/phijie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、全網(wǎng)營銷推廣、企業(yè)建站、軟件開發(fā)、做網(wǎng)站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)