整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
次瀏覽網(wǎng)站右下角都會返回頁面頂部的按鈕，每次都會點擊一下，其實這是為了更好的用戶體驗而設(shè)置的，今天小猿圈web前端講師教你用jQuery做個返回頂部按鈕。
我們先來分析一下具體流程
當(dāng)頁面沒有滾動的時候，這個按鈕是隱藏狀態(tài)，當(dāng)向下滾動1000px時這個按鈕會以淡入的效果出現(xiàn)，這時候點擊按鈕會返回頂部，并且按鈕會隱藏。
首先我們來簡單布局一下頁面，這里就不用多講解了，直接放一個我的HTML和CSS源碼。
<body>
<div style="width:700px; margin: 0 auto;">
<img src="6.png" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<img src="4.jpg" alt="">
<img src="5.jpg" alt="">
</div>
<div id="actGotop" class="actGotop">
<a href="javascript：0"></a>
</div>
</body>
<style>
a {
color: #FFF;
}
.actGotop {
position: fixed;
bottom: 50px;
right: 100px;
width: 150px;
height: 195px;
display: none;
z-index: 100;
}
.actGotop a, .actGotop a:link {
width: 200px;
height: 195px;
display: inline-block;
background: url(btop.png) no-repeat;
outline: none;
}
.actGotop a:hover {
width: 200px;
height: 195px;
background: url(btop1.png) no-repeat;
outline: none;
}
</style>
接下來我們來看一下如何用jQuery實現(xiàn)最終效果。
script src="jquery-1.12.4.js"></script>
<script>
$(function(){
$(window).scroll(function(){
if ($(window).scrollTop()>=1000) {
$(".actGotop").stop().fadeIn(300);
} else {
$(".actGotop").stop().fadeOut(300);
}
})
$(".actGotop").click(function(){
$("body,html").stop().animate({scrollTop:0},400);
})
})
</script>
實現(xiàn)過程分析：
首先判斷滾動距離，超過1000時返回頂部圖標(biāo)會以fadeIn的動畫顯示出來，小于1000則隱藏。
點擊返回頂部圖標(biāo)后注意，不能寫成$(window).animate()要寫$("body,html")才可以。想讓動畫效果慢一些可以把animate里后面的400參數(shù)修改大一些。
另外一定記得給fadeIn、fadeOut和animate前面加stop()方法，否則會在連續(xù)快速觸發(fā)動畫的時候出現(xiàn)bug。
以上就是小猿圈web前端講師給大家分享的教你用jQuery做個返回頂部按鈕，希望對小伙伴們有所幫助，想要了解更多內(nèi)容的小伙伴可以登錄小猿圈官網(wǎng)了解。
window.history.pushState(null, null, window.location.href);
window.addEventListener("popstate", function () {
window.history.pushState(null, null, window.location.href);
});品同學(xué)總是會提出各種稀奇古怪的需求，比如qj用戶的返回操作。。。
上面的代碼經(jīng)常被用來禁止網(wǎng)頁頁面的返回，經(jīng)過個人的測試(Chrome/92.0.4497.0)，必須在用戶有了交互之后才能生效，否則不生效；
浮框是什么？大家不一定清楚，但是說網(wǎng)站上怎么都關(guān)不完的小廣告，估計人人都被它惡心過，不管你怎么滾動網(wǎng)頁，這些小廣告始終會出現(xiàn)在你的屏幕上。今天我們就來聊聊這些小廣告背后的原理——懸浮框。
懸浮框是Web前端開發(fā)中的一種常見的網(wǎng)頁特效，它懸浮于網(wǎng)頁內(nèi)容之上，不受滾動條的影響，可以一直處于瀏覽器的可視區(qū)域內(nèi)。
通過懸浮框，我們可以為用戶展示一些特定的信息（如提示信息、廣告信息），也可以在懸浮框中提供一些常用的按鈕（如“返回頂部”按鈕、“分享”按鈕）方便用戶操作。
下面為大家展示一些網(wǎng)頁中常見的懸浮框效果。
（1）當(dāng)用戶使用百度進行搜索時，在搜索結(jié)果頁面的頂部會出現(xiàn)懸浮框。該懸浮框會一直懸浮在網(wǎng)頁頂部，不受用戶滾動頁面的影響，如下圖所示。
（2）用戶在騰訊網(wǎng)瀏覽新聞時，右下角會出現(xiàn)兩個小按鈕，分別是“用戶反饋”和“^”（返回頂部），這兩個小按鈕就是通過懸浮框來實現(xiàn)的，如下圖所示。
對于Web前端開發(fā)不熟悉的朋友們來說，也許會覺得懸浮框做起來很不容易，需要用大量的JavaScript代碼才能實現(xiàn)。
實際上，懸浮框做起來很簡單，它主要是通過CSS代碼來實現(xiàn)的。在學(xué)習(xí)CSS的時候，大家是不是都學(xué)過定位（position）呢？還有印象嗎？
我們來回顧一下。在CSS中，position屬性可以設(shè)置元素的定位方式。position屬性有4個常用的可選值，分別表示的含義如下。
在回顧了position屬性的4個可選值以后，請大家思考一下，實現(xiàn)懸浮框，應(yīng)該使用哪一種定義方式呢？
答案是：fixed固定定位。
當(dāng)對元素設(shè)置固定定位后，該元素將脫離標(biāo)準(zhǔn)文檔流的控制，始終依據(jù)瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動，也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。
下面我們通過一個具體案例來實現(xiàn)懸浮框效果，案例的效果圖如下所示。
在上圖中，頁面右下角的“返回頂部”就是一個懸浮框，當(dāng)用戶單擊該懸浮框后就會返回頂部。
下面講解本案例的具體實現(xiàn)步驟。
（1）創(chuàng)建一個HTML文件，在文件中編寫簡單的網(wǎng)頁結(jié)構(gòu)和內(nèi)容，具體代碼如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 此處用于編寫懸浮框的樣式 */
</style>
</head>
<body>
<!-- 此處用于編寫網(wǎng)頁結(jié)構(gòu) -->
</body>
</html>（2）在第11行代碼的位置，新增如下代碼，為網(wǎng)頁填充內(nèi)容，并完成懸浮框的頁面結(jié)構(gòu)。
<div>
<p>網(wǎng)頁內(nèi)容</p>
<p>網(wǎng)頁內(nèi)容</p>
<p>網(wǎng)頁內(nèi)容</p>
<p>網(wǎng)頁內(nèi)容</p>
<p>網(wǎng)頁內(nèi)容</p>
<p>網(wǎng)頁內(nèi)容</p>
……（大家可以把上面的p標(biāo)簽多復(fù)制幾行，以填充網(wǎng)頁內(nèi)容）
</div>
<!-- 懸浮框結(jié)構(gòu) -->
<div class="go-top">
<a href="#">返回<br>頂部</a>
</div>上述代碼中，第2~7行代碼用于簡單填充網(wǎng)頁內(nèi)容，使網(wǎng)頁出現(xiàn)滾動條；第10~13行代碼用于實現(xiàn)懸浮框結(jié)構(gòu)。
（3）在<style>標(biāo)簽內(nèi)編寫頁面樣式，通過fixed固定定位使懸浮框停留在頁面右下角的位置，并美化懸浮框的樣式，將其調(diào)整為圓角矩形，背景為淺灰色。
.go-top {
position: fixed; /* 設(shè)置fixed固定定位 */
bottom: 20px; /* 距離瀏覽器窗口下邊框20px */
right: 20px; /* 距離瀏覽器窗口右邊框20px */
}
.go-top a {
display: block; /* 將<a>標(biāo)簽設(shè)為塊元素，用于美化樣式 */
text-decoration: none; /* 取消超鏈接下畫線 */
color: #333; /* 設(shè)置文本顏色 */
background-color: #f2f2f2; /* 設(shè)置背景顏色 */
border: 1px solid #ccc; /* 設(shè)置邊框樣式 */
padding: 10px 20px; /* 設(shè)置內(nèi)邊距 */
border-radius: 5px; /* 設(shè)置圓角矩形 */
letter-spacing: 2px; /* 設(shè)置文字間距 */
}案例最終的實現(xiàn)效果如下：
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
