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