一個(gè)簡(jiǎn)單的彈性返回頂部JS代碼實(shí)現(xiàn)介紹
更新時(shí)間：2013年06月09日 15:30:24 作者：
頁(yè)面滾動(dòng)條處于低端,點(diǎn)擊回到頂部，并且隱藏掉，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈
昨天做了一個(gè)這樣的功能，貼出來(lái)參考。
HTML/JS/CSS代碼：
<!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" />
<title>彈性返回頂部JS代碼</title>
<script type="text/javascript">
function goTopEx() {
var obj = document.getElementById("goTopBtn");
function getScrollTop() {
return document.documentElement.scrollTop + document.body.scrollTop;
}
function setScrollTop(value) {
if (document.documentElement.scrollTop) {
document.documentElement.scrollTop = value;
} else {
document.body.scrollTop = value;
}
}
window.onscroll = function() {
getScrollTop() > 0 ? obj.style.display = "": obj.style.display = "none";
}
obj.onclick = function() {
var goTop = setInterval(scrollMove, 10);
function scrollMove() {
setScrollTop(getScrollTop() / 1.1);
if (getScrollTop() < 1) clearInterval(goTop);
}
}
}
</script>
<style>
BODY {
HEIGHT: 3600px;
}
#goTopBtn {
POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; BOTTOM: 35px; HEIGHT: 33px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 0px; _position: absolute; _right: auto
}
</style>
</head>
<body style="text-align:center">
<div style="display: none" id="goTopBtn"><img border=0 src="/${res}/img/go_to_top.png"></div>
<script type=text/javascript>goTopEx();</script>
<br /><br /><br /><br /><br /><br /><br />
<p></p>
<p><p>超出首屏范圍，即會(huì)出現(xiàn)TOP按鈕，否則自動(dòng)隱藏。<br />
</p></p>
<p></p>
</body>
</html>
效果圖：
頁(yè)面滾動(dòng)條處于低端
1、
2、點(diǎn)擊回到頂部，并且隱藏掉。
HTML/JS/CSS代碼：
復(fù)制代碼 代碼如下:
<!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" />
<title>彈性返回頂部JS代碼</title>
<script type="text/javascript">
function goTopEx() {
var obj = document.getElementById("goTopBtn");
function getScrollTop() {
return document.documentElement.scrollTop + document.body.scrollTop;
}
function setScrollTop(value) {
if (document.documentElement.scrollTop) {
document.documentElement.scrollTop = value;
} else {
document.body.scrollTop = value;
}
}
window.onscroll = function() {
getScrollTop() > 0 ? obj.style.display = "": obj.style.display = "none";
}
obj.onclick = function() {
var goTop = setInterval(scrollMove, 10);
function scrollMove() {
setScrollTop(getScrollTop() / 1.1);
if (getScrollTop() < 1) clearInterval(goTop);
}
}
}
</script>
<style>
BODY {
HEIGHT: 3600px;
}
#goTopBtn {
POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; BOTTOM: 35px; HEIGHT: 33px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 0px; _position: absolute; _right: auto
}
</style>
</head>
<body style="text-align:center">
<div style="display: none" id="goTopBtn"><img border=0 src="/${res}/img/go_to_top.png"></div>
<script type=text/javascript>goTopEx();</script>
<br /><br /><br /><br /><br /><br /><br />
<p></p>
<p><p>超出首屏范圍，即會(huì)出現(xiàn)TOP按鈕，否則自動(dòng)隱藏。<br />
</p></p>
<p></p>
</body>
</html>
效果圖：
頁(yè)面滾動(dòng)條處于低端
1、
2、點(diǎn)擊回到頂部，并且隱藏掉。
您可能感興趣的文章:
- js+JQuery返回頂部功能如何實(shí)現(xiàn)
- javascript返回頂部效果(自寫(xiě)代碼)
- js簡(jiǎn)單的點(diǎn)擊返回頂部效果實(shí)現(xiàn)方法
- JS返回頂部實(shí)例代碼
- javascript簡(jiǎn)單實(shí)現(xiàn)跟隨滾動(dòng)條漂浮的返回頂部按鈕效果
- javascript實(shí)現(xiàn)博客園頁(yè)面右下角返回頂部按鈕
- js實(shí)現(xiàn)返回頂部效果
- jQuery實(shí)現(xiàn)返回頂部功能適合不支持js的瀏覽器
- 原生js實(shí)現(xiàn)返回頂部緩沖效果
- js實(shí)現(xiàn)帶有動(dòng)畫(huà)的返回頂部
相關(guān)文章
如何解決attachEvent函數(shù)時(shí)，this指向被綁定的元素的問(wèn)題？
如何解決attachEvent函數(shù)時(shí)，this指向被綁定的元素的問(wèn)題？...2007-04-04
基于casperjs和resemble.js實(shí)現(xiàn)一個(gè)像素對(duì)比服務(wù)詳解
這篇文章主要給大家介紹了關(guān)于基于casperjs和resemble.js實(shí)現(xiàn)一個(gè)像素對(duì)比服務(wù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
兼容最新firefox、chrome和IE的javascript圖片預(yù)覽實(shí)現(xiàn)代碼
這篇文章主要介紹了兼容最新firefox、chrome和IE的javascript圖片預(yù)覽實(shí)現(xiàn)代碼,測(cè)試了瀏覽器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以參考下2014-08-08
淺談javascript的url參數(shù)parse和build函數(shù)
下面小編就為大家?guī)?lái)一篇淺談javascript的url參數(shù)parse和build函數(shù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
這篇文章主要介紹了JS document內(nèi)容及樣式操作,結(jié)合完整實(shí)例形式分析了JavaScript document內(nèi)容及樣式的獲取、修改、添加等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
ion content 滾動(dòng)到底部會(huì)遮住一部分視圖的快速解決方法
本文給大家?guī)?lái)了ion content 滾動(dòng)到底部會(huì)遮住一部分視圖的快速解決方法，其實(shí)解決方法超簡(jiǎn)單的，只要在你的controller里面預(yù)先注入$ionicScrollDelegate就可以了，感興趣的朋友通過(guò)本文一起學(xué)習(xí)吧2016-09-09
4種JavaScript實(shí)現(xiàn)簡(jiǎn)單tab選項(xiàng)卡切換的方法
這篇文章主要介紹了4種JavaScript實(shí)現(xiàn)簡(jiǎn)單tab選項(xiàng)卡切換的方法，感興趣的小伙伴們可以參考一下2016-01-01
ionic2 tabs 圖標(biāo)自定義實(shí)例
這篇文章主要介紹了ionic2 tabs 圖標(biāo)自定義,需要的朋友可以參考下2017-03-03
javascript記住用戶(hù)名和登錄密碼（兩種方式）
這篇文章主要通過(guò)兩種方式介紹javascript記住用戶(hù)名和登錄密碼，有需要的小朋友可以來(lái)參考下2015-08-08
JavaScript?中的字符串操作可能很復(fù)雜，?盡管字符串操作易于掌握，但實(shí)施起來(lái)卻具有挑戰(zhàn)性，其中一個(gè)相關(guān)領(lǐng)域是添加新行，這篇文章主要介紹了JavaScript中的行繼續(xù)符操作,需要的朋友可以參考下2023-06-06