jquery如何實現點擊網頁回到頂部效果？ （圖文+影片）
- 藏色散人原創
- 2018-10-13 13:53:486560瀏覽
本篇文章主要跟大家介紹如何用jquery程式碼實現網頁回到頂部的效果。
我們在瀏覽各大網站頁面時，想必大家肯定都遇過，當閱覽一個長頁面時，拉到下面部分會出現類似回到頂部的按鈕特效吧。
這種點擊回到頂部的功能特效，可以很大程度地提高使用者體驗。那麼實現這樣的功能也是非常簡單的。
下面我們就透過簡單的程式碼範例，為大家介紹用jquery實作點擊回到頂部的功能方法。
<!DOCTYPE html>
<html>
<head>
<title>回到顶部特效</title>
<meta charset="UTF-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
body {
text-align: center;
}
h1 {
width: 1200px;
height: 1500px;
background: #eee;
margin: 30px auto;
}
a {
text-decoration: none;
color: #fff;
}
p#back {
text-align: center;
position: fixed;
bottom: 100px;
right: 60px;
background: #000;
border-radius: 3px;
height: 50px;
width: 80px;
display: none;
}
</style>
</head>
<body>
<h1>网页内容</h1>
<a href=""><p id="back"><br> 返回顶部</p></a>
</body>
<script>
// 文档就绪
$(function () {
// 获取浏览器窗口
$(window).scroll(function () {
// 获取浏览器滚动条距离顶部的高度
if ($(window).scrollTop() > 150) {
// 设置按钮出现
$('#back').fadeIn(1000)
} else {
// 设置按钮消失
$('#back').fadeOut(1000)
}
})
})
</script>
</html>此段程式碼中我們主要引用了一個jquery的線上庫，並寫了一些簡單的HTML頁面和js程式碼判斷，當滾動條距頂部的高度大於150的話，則設定按鈕出現，相反則設定按鈕隱藏。最後透過瀏覽器訪問，效果如下：
然後我們拖曳滾動條往下，會緩慢出現回到頂部的按鈕，效果如下圖：
注意：
fadeIn() 方法使用淡入效果來顯示被選元素，假如該元素是隱藏的。 （本例中，參數設為1000毫秒，表示選定元素的淡入過渡時間為1000毫秒，如果設為0，則會立即出現被選元素。）
##fadeOut() 方法使用淡出效果來隱藏被選元素，假如該元素是隱藏的。 （參數同上）
這篇文章就是關於jquery實現網頁回到頂部的效果方法介紹，簡單易懂，希望對需要的朋友有所幫助！
想要了解更多前端相關知識，可以關注PHP中文網jQuery影片教學或 HTML影片教學，CSS影片教學、 Bootstrap影片教學等等相關影片教程，歡迎大家參考學習！
以上是jquery如何實現點擊網頁回到頂部效果？ （圖文+影片）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn