JS實(shí)現(xiàn)帶動(dòng)畫(huà)的回到頂部效果
更新時(shí)間：2017年12月28日 09:39:31 作者：夏爾_
這篇文章主要為大家詳細(xì)
介紹了JS實(shí)現(xiàn)帶動(dòng)畫(huà)的回到頂部效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)帶動(dòng)畫(huà)的回到頂部效果的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)功能：滾動(dòng)到頁(yè)面某一個(gè)高度的時(shí)候，回到頂部按鈕出現(xiàn)。點(diǎn)擊之后回到網(wǎng)頁(yè)頂部，按鈕隱藏。
代碼如下，jQuery引用的是百度CDN的，因此整段代碼復(fù)制下來(lái)后在瀏覽器運(yùn)行即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實(shí)現(xiàn)回到頂部功能</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.gotop {
display: none;
position: fixed;
bottom: 50px;
right: 50px;
width: 40px;
height: 40px;
padding: 5px;
background-color: #F00;
color: #FFF;
text-align: center;
cursor: pointer;
}
</style>
<script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
<body>
<p>這是一段文字</p><br /><br /><br /><br /><br /><br />
<p>這是一段文字</p><br /><br /><br /><br /><br /><br />
<p>這是一段文字</p><br /><br /><br /><br /><br /><br />
<p>這是一段文字</p><br /><br /><br /><br /><br /><br />
<p>這是一段文字</p><br /><br /><br /><br /><br /><br />
<p>這是一段文字</p><br /><br /><br /><br /><br /><br />
<p>這是一段文字</p><br /><br /><br /><br /><br /><br />
<p>這是一段文字</p><br /><br /><br /><br /><br /><br />
<p>這是一段文字</p><br /><br /><br /><br /><br /><br />
<p>這是一段文字</p><br /><br /><br /><br /><br /><br />
<div id="goTop" class="gotop">
<p>回到</p>
<p>頂部</p>
</div>
</body>
<script>
function goTop() {
$(window).scroll(function() {
var $scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //兼容瀏覽器
if($scrollTop > 100) { //滾動(dòng)高度可調(diào)
$("#goTop").show();
} else {
$("#goTop").hide();
};
})
$("#goTop").on("click", function() {
$("body").stop().animate({
scrollTop: 0
});
})
}
goTop();
</script>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn)
這篇文章主要為大家詳細(xì)介紹了使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
通過(guò)javascript的匿名函數(shù)來(lái)分析幾段簡(jiǎn)單有趣的代碼
想起自己很久以前學(xué)習(xí)javascript的經(jīng)歷，也曾經(jīng)碰到過(guò)幾個(gè)由匿名函數(shù)造成的困擾（其中一個(gè)就是由閉包引起的），下面就整理幾段簡(jiǎn)單代碼討論一下，讓我們大家一起進(jìn)步。2010-06-06
javascript結(jié)合html5 canvas實(shí)現(xiàn)(可調(diào)畫(huà)筆顏色/粗細(xì)/橡皮)的涂鴉板
js+html5 canvas實(shí)現(xiàn)的涂鴉畫(huà)板特效,可調(diào)畫(huà)筆顏色|粗細(xì)|橡皮,可以保存涂鴉效果為圖片編碼，測(cè)試了下還不錯(cuò)，感興趣的朋友可以參考下2013-04-04
js的form表單提交url傳參數(shù)(包含+等特殊字符)的兩種解決方法
下面小編就為大家?guī)?lái)一篇js的form表單提交url傳參數(shù)(包含+等特殊字符)的兩種解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
使用canvas繪圖音樂(lè)頻譜示例及技術(shù)分析
這篇文章主要為大家介紹了使用canvas實(shí)現(xiàn)音樂(lè)頻譜示例及技術(shù)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
request請(qǐng)求獲取參數(shù)的實(shí)現(xiàn)方法(post和get兩種方式)
下面小編就為大家?guī)?lái)一篇request請(qǐng)求獲取參數(shù)的實(shí)現(xiàn)方法(post和get兩種方式)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
js將列表組裝成樹(shù)結(jié)構(gòu)的兩種實(shí)現(xiàn)方式分享
最近做的任務(wù)提了新的需求,需要實(shí)現(xiàn)一個(gè)樹(shù)形結(jié)構(gòu),所以下面這篇文章主要給大家介紹了關(guān)于js將列表組裝成樹(shù)結(jié)構(gòu)的兩種實(shí)現(xiàn)方式,需要的朋友可以參考下2022-01-01
淺談JavaScript Math和Number對(duì)象
這篇文章主要簡(jiǎn)單介紹了JavaScript Math和Number對(duì)象的相關(guān)資料,需要的朋友可以參考下2015-01-01
[紅色]CSS+JS構(gòu)建的圖片查看器...2006-07-07
uniapp 實(shí)現(xiàn)微信小程序全局分享的示例代碼
本文主要介紹了uniapp 實(shí)現(xiàn)微信小程序全局分享的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12