當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery案例15——jq回到顶部

發布時間：2024/8/1 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery案例15——jq回到顶部小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、案例描述

頁面內容很多，當滾動條滾動的實際高度>=窗口可視高度時，出現向上的按鈕，一點按鈕就會回到頂部。

二、案例效果演示

“我是內容”處于整屏的末尾，當頁面滾動到此位置時，上滑按鈕就會出現。

三、案例局部代碼

css代碼：

html代碼：

<div class="backTop">^ </div>  <div class="content">我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容<br />我是內容2<br /> </div>

js代碼：

四、案例整體代碼

五、總結

1.默認情況下，先將按鈕隱藏，當滑動頁面超出一屏，也就是所謂的滾動條滾動的實際高度>=窗口可視高度，這時讓按鈕出現，對按鈕綁定點擊事件，點擊之后讓整屏的滾動條高度變為0，也就是所謂的滾動條沒有高度，沒有高度就代表著頁面在最頂端。
2.scroll():https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scroll
3.scrollTop():https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop

六、新增，滑動到指定位置出現按鈕

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="./js/jQuery.min.js"></script><title>Document</title><style>.parent {width: 400px;height: 400px;background-color: red;margin: 100px;position: relative;}.son {width: 100px;height: 100px;background-color: green;position: absolute;left: 10px;top: 10px;}.backTop {width: 80px;height: 50px;line-height: 50px;text-align: center;background-color: black;color: #fff;position: fixed;bottom: 50px;right: 10px;display: none;}#main {width: 500px;height: 1000px;background-color: #9ebc19;}</style> </head><body><div class="backTop">返回頂部</div><div class="parent"><div class="son"></div></div><div id="main"></div><script>$(function() {$(window).scroll(function() {var $mtop = $('#main').offset().top; //元素距離文檔上方的高度var $jtop = $(document).scrollTop(); //卷起來的高度// 如果卷起來的高度大于元素在頁面可見的高度，讓按鈕顯示if ($jtop >= $mtop) {$('.backTop').show();} else {$('.backTop').hide();}});//點擊返回頂部按鈕。（1秒之內）$('.backTop').click(function() {$('html,body').animate({scrollTop: 0}, 1000)});});</script> </body></html>

總結

以上是生活随笔為你收集整理的jquery案例15——jq回到顶部的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。