jquery經典例項之回到頂部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GBK">
<title>回到頂部</title>
<style>
.divA {
height: 1500px;
}
.divB {
width: 50px;
height: 60px;
font-size: 23px;
background-color: green;
position: fixed;
right: 18px;
bottom: 18px;
}
.divB:hover{
cursor: pointer;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="divA"></div>
<div class="divB hide" onclick="gotoTop()"><strong>回到頂部</strong></div>
<script src="jquery-1.5.1.js"></script>
<script>
window.onscroll = function () {
var current = $(window).scrollTop();
//縱向滾動條遮蓋高度超過180就顯示回到頂部div
if (current > 180){
$(".divB").removeClass("hide");
}else {
$(".divB").addClass("hide");
}
};
function gotoTop() {
$(window).scrollTop(0);
}
</script>
</body>
</html>
相關文章
- jQuery之回到頂部jQuery
- Jquery回到頂部功能jQuery
- 回到頂部和回到頂部按鈕的顯示隱藏
- js——頁面回到頂部JS
- js實現點選回到頂部JS
- vue中實現回到頂部功能Vue
- 每天一邊js -- 回到頂部JS
- 從頁面底部回到頂部+動畫效果 & 翻頁後從按鈕處回到頁面頂部動畫
- R語言經典例項R語言
- 簡單實現點選回到頂部
- Python 入門之經典函式例項(二)Python函式
- Ps經典例項教程3000例
- 原生JavaScript實現頁面回到頂部的功能JavaScript
- [轉載] Python 機器學習經典例項Python機器學習
- Java 經典例項:自定義迭代器Java
- Tomcat JSP經典配置例項TomcatJS
- jQuery標題自動頂貼效果程式碼例項jQuery
- jQuery頂部帶有選項卡的焦點圖效果jQuery
- 基於js實現點選按鈕回到頂部JS
- 懸浮按鈕點選回到頂部FloatingActionButton
- css實現網頁”回到頂部“的程式碼效果CSS網頁
- 直播軟體搭建,利用原生JS實現回到頂部以及吸頂效果JS
- app直播原始碼,利用原生JS實現回到頂部以及吸頂效果APP原始碼JS
- 網頁頂部導航選單程式碼例項網頁
- 點選頂部彈出提示層程式碼例項
- 100多個經典常用的jQuery外掛大全例項演示和下載jQuery
- Java經典例項:處理單個字串Java字串
- Java經典例項:按字元顛倒字串Java字元字串
- Java經典例項:比較浮點數Java
- jQuery文字從頂部掉落效果jQuery
- jQuery 例項jQuery
- 手機直播原始碼,點選按鈕,立即回到頂部原始碼
- 直播軟體搭建,點選按鈕自動回到頂部
- DL4J實戰之四:經典卷積例項(GPU版本)卷積GPU
- Java 經典例項: Unicode字元和String之間的轉換JavaUnicode字元
- 家庭區域網組建經典例項分享
- mysql儲存過程經典例項詳解MySql儲存過程
- jQuery返回頂部按鈕詳解jQuery