本篇文章主要給大家介紹如何用jquery代碼實(shí)現(xiàn)網(wǎng)頁(yè)回到頂部的效果。

我們?cè)跒g覽各大網(wǎng)站頁(yè)面時(shí)，想必大家肯定都遇到過(guò)，當(dāng)閱覽一個(gè)長(zhǎng)頁(yè)面時(shí)，拉到下面部分會(huì)出現(xiàn)類(lèi)似回到頂部的按鈕特效吧。

這種點(diǎn)擊回到頂部的功能特效，可以很大程度上提高用戶體驗(yàn)。那么實(shí)現(xiàn)這樣的功能也是非常簡(jiǎn)單的。

下面我們就通過(guò)簡(jiǎn)單的代碼示例，為大家介紹用jquery實(shí)現(xiàn)點(diǎn)擊回到頂部的功能方法。

回到頂部特效

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;

}

網(wǎng)頁(yè)內(nèi)容

返回頂部

// 文檔就緒

$(function () {

// 獲取瀏覽器窗口

$(window).scroll(function () {

// 獲取瀏覽器滾動(dòng)條距離頂部的高度

if ($(window).scrollTop() > 150) {

// 設(shè)置按鈕出現(xiàn)

$('#back').fadeIn(1000)

} else {

// 設(shè)置按鈕消失

$('#back').fadeOut(1000)

}

})

})

此段代碼中我們主要引用了一個(gè)jquery的線上庫(kù)，并寫(xiě)了一些簡(jiǎn)單的HTML頁(yè)面和js代碼判斷，當(dāng)滾動(dòng)條距頂部的高度大于150的話，則設(shè)置按鈕出現(xiàn)，相反則設(shè)置按鈕隱藏。最后通過(guò)瀏覽器訪問(wèn)，效果如下：

然后我們拖動(dòng)滾動(dòng)條往下，會(huì)緩慢出現(xiàn)回到頂部的按鈕，效果如下圖：

注意：

fadeIn()方法使用淡入效果來(lái)顯示被選元素，假如該元素是隱藏的。(本例中，參數(shù)設(shè)為1000毫秒，表示選定元素的淡入過(guò)渡時(shí)間為1000毫秒，如果設(shè)為0，則會(huì)立即出現(xiàn)被選元素。)

fadeOut()方法使用淡出效果來(lái)隱藏被選元素，假如該元素是隱藏的。(參數(shù)同上)

本篇文章就是關(guān)于jquery實(shí)現(xiàn)網(wǎng)頁(yè)回到頂部的效果方法介紹，簡(jiǎn)單易懂，希望對(duì)需要的朋友有所幫助！

想要了解更多前端相關(guān)知識(shí)，可以關(guān)注PHP中文網(wǎng)jQuery視頻教程或者HTML視頻教程，CSS視頻教程 、Bootstrap視頻教程等等相關(guān)視頻教程，歡迎大家參考學(xué)習(xí)！

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的php 回到顶部,jquery如何实现点击网页回到顶部效果？（图文+视频）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。