一個(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)文章
網(wǎng)頁(yè)取色...2006-10-10
總結(jié)AJAX相關(guān)JS代碼片段和瀏覽器模型
總結(jié)AJAX相關(guān)JS代碼片段和瀏覽器模型...2007-08-08
這篇文章主要介紹了javascript表格的渲染組件的相關(guān)資料,需要的朋友可以參考下2015-07-07
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)左滑刪除效果的相關(guān)資料,左滑刪除效果在app的交互方式中十分流行,比如全民應(yīng)用微信,文中給出了詳細(xì)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了JS實(shí)現(xiàn)的貪吃蛇游戲,結(jié)合具體案例形式分析了javascript實(shí)現(xiàn)貪吃蛇的相關(guān)步驟、原理、算法操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-05-05
這篇文章主要介紹了nodejs分離html文件里面的js和css的方法，本文需要分離出一個(gè)html 文件里面的script 和style 里面的內(nèi)容，然后單獨(dú)生成js文件和css 文件，感興趣的可以了解一下2019-04-04
基于js與flash實(shí)現(xiàn)的網(wǎng)站flv視頻播放插件代碼
這篇文章主要介紹了基于js與flash實(shí)現(xiàn)的網(wǎng)站flv視頻播放插件代碼,該功能在很多網(wǎng)站上都有著廣泛的應(yīng)用,本文以實(shí)例形式對(duì)其進(jìn)行介紹,需要的朋友可以參考下2014-10-10
layui之?dāng)?shù)據(jù)表格--與后臺(tái)交互獲取數(shù)據(jù)的方法
今天小編就為大家分享一篇layui之?dāng)?shù)據(jù)表格--與后臺(tái)交互獲取數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
閉包是js的一個(gè)難點(diǎn)也是它的一個(gè)特色,是我們必須掌握的js高級(jí)特性,下面這篇文章主要給大家介紹了關(guān)于JavaScript閉包函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-11-11
微信小程序前端通過(guò)weixin://wxpay/bizpayurl生成支付二維碼全過(guò)程
這篇文章主要給大家介紹了關(guān)于微信小程序前端通過(guò)weixin://wxpay/bizpayurl生成支付二維碼的相關(guān)資料,weixin://wxpay/bizpayurl 是一個(gè)微信支付的鏈接地址,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07