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

编程问答

jQuery-点击按钮实现回到顶部的两种方式

發布時間：2025/3/21 编程问答 9 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery-点击按钮实现回到顶部的两种方式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- 1.點擊按鈕，快速回到頂部
- 2.點擊按鈕，緩慢的回到頂部
- 3.效果圖參考:

1.點擊按鈕，快速回到頂部

2.點擊按鈕，緩慢的回到頂部

在這里我們來講解一下，具體實現原理
就拿看電影來舉例子，我們所看的電影都是一幀一幀播放的，肉眼對于那細小的間隔是分辨不出來的，所以我們認為電影的放映都很流暢，其實是一段一段連起來的。同樣我們要實現從下到上緩慢的上升，就是一段一段的動，并且每一段都是迅速到達目的地，這樣連起來就成勻速的了

<html><head><base href="<%=basePath%>"><title>My JSP 'practice_02.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><style type="text/css">*{margin:0;padding:0;}.all {width:100%;height:180%;}.btn {position:fixed;bottom:20px;right:20px;width:80px;height:30px;border-radius:5px;background:red;}</style></head><body> <div class="all"><button class="btn" id="btn1">回到頂部</button></div><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">$('#btn1').click(function() {//總距離var distance = $('html').scrollTop()+$('body').scrollTop();//height為了更新當前滾動條的高度而用var height = $('html,body');//總時間(500ms)var time = 500;//每間隔intervalTime時間滾動一次var intervalTime = 50;//計算每次滑動的距離var itemDistance = distance/(time/intervalTime);//使用循環定時器不斷滾動var intervalId = setInterval(function() {distance -= itemDistance;if(distance<=0) {//到達頂部，停止定時器distance = 0;clearInterval(intervalId);}//更新當前滾動條的高度height.scrollTop(distance);},intervalTime);});</script></body> </html>

3.效果圖參考:

總結

以上是生活随笔為你收集整理的jQuery-点击按钮实现回到顶部的两种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： jQuery兼容IE和Chrom浏览器-
下一篇： JS对象与Dom对象与jQuery对象之