要實(shí)現(xiàn)該效果，首先要先了解以下幾點(diǎn)基礎(chǔ)知識(shí)：
窗體滾動(dòng)事件：$(window).scroll(function(){...});
獲取窗體滾動(dòng)距離：$(window).scrollTop();
獲取窗體高度：$(window).height();
了解以上內(nèi)容就可以實(shí)現(xiàn)通過(guò)hyperlink控件實(shí)現(xiàn)返回頂部的效果了。
1.準(zhǔn)備界面結(jié)構(gòu)代碼：
1
<
form
id
="form1"
runat
="server"
>
2
<
div
>
3
<
asp:HyperLink
ID
="Top"
runat
="server"
></
asp:HyperLink
>
4
<
h1
style
="text-align: center"
>
5
利用jQuery實(shí)現(xiàn)返回頂部效果
</
h1
>
6
<
div
style
="width: 800px; border: 1px; text-align: left; margin-left: 230px;"
>
7
。。。。。。(很多內(nèi)容,可以滾動(dòng))
8
</
div
>
9
<
asp:HyperLink
ID
="backToTopLink"
runat
="server"
CssClass
="backToTop"
>
回頂部
</
asp:HyperLink
>
10
</
div
>
11
</
form
>
2.給回頂部控件添加樣式：
1
<
style
type
="text/css"
>
2
.backToTop
3
{
4
background-color
:
Yellow
;
5
width
:
30px
;
6
border-style
:
outset
;
7
border-width
:
1px
;
8
text-align
:
center
;
9
font-weight
:
bold
;
10
font-family
:
Arial
;
11
font-size
:
x-large
;
12
cursor
:
pointer
;
13
position
:
absolute
;
// 注意要設(shè)置為絕對(duì)位置
14
right
:
100px
;
15
}
16
</
style
>
3.添加實(shí)現(xiàn)置頂效果腳本代碼：
1
<
script
type
="text/javascript"
>
2
$(document).ready(
function
() {
3
$(
"
#backToTopLink
"
).attr(
"
title
"
,
"
回頂部
"
);
4
$(
"
#backToTopLink
"
).attr(
"
href
"
,
"
#Top
"
); // 通過(guò)鏈接實(shí)現(xiàn)置頂
5
$(window).scroll(
function
() {
6
if
($(window).scrollTop()
<=
100
) {
7
$(
"
#backToTopLink
"
).fadeOut(
200
);
8
}
9
else
{
10
$(
"
#backToTopLink
"
).fadeIn(
400
);
11
}
12
var
v_Top
=
$(window).height()
-
$(
"
.backToTop
"
).height()
-
10
+
$(window).scrollTop(); // 動(dòng)態(tài)計(jì)算滾動(dòng)后置頂按鈕top位置
13
$(
"
.backToTop
"
).css(
"
top
"
, v_Top
+
"
px
"
);
14
});
15
});
16
</
script
>
注意，本代碼只是為了演示hyperlink控件來(lái)實(shí)現(xiàn)返回頂部的效果。還可以通過(guò)jQuery的動(dòng)畫(huà)效果，實(shí)現(xiàn)平滑置頂。
平滑過(guò)渡返回頂部代碼如下：
$('#backToTopLink').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); // 替換$("#backToTopLink").attr("href", "#Top");即可
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
