日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) >

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

發(fā)布時(shí)間：2025/3/21 21 豆豆
生活随笔 收集整理的這篇文章主要介紹了 jQuery-点击按钮实现回到顶部的两种方式 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

    • 1.點(diǎn)擊按鈕，快速回到頂部
    • 2.點(diǎn)擊按鈕，緩慢的回到頂部
    • 3.效果圖參考:

1.點(diǎn)擊按鈕，快速回到頂部

<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"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><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() {$('html,body').scrollTop(0);});</script></body> </html>

2.點(diǎn)擊按鈕，緩慢的回到頂部

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

<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"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><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為了更新當(dāng)前滾動(dòng)條的高度而用var height = $('html,body');//總時(shí)間(500ms)var time = 500;//每間隔intervalTime時(shí)間滾動(dòng)一次var intervalTime = 50;//計(jì)算每次滑動(dòng)的距離var itemDistance = distance/(time/intervalTime);//使用循環(huán)定時(shí)器不斷滾動(dòng)var intervalId = setInterval(function() {distance -= itemDistance;if(distance<=0) {//到達(dá)頂部，停止定時(shí)器distance = 0;clearInterval(intervalId);}//更新當(dāng)前滾動(dòng)條的高度height.scrollTop(distance);},intervalTime);});</script></body> </html>

3.效果圖參考:

總結(jié)

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

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