jquery點選返回網頁頂部程式碼
本章節分享一段簡單的程式碼例項,它實現了點選平滑返回網頁頂部的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com" /> <title>螞蟻部落</title> <style> .scrollTop{ width:50px; height:1500px; margin:0px auto; background-color:green; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function(){ $("input").click(function(){ $('html, body').animate({scrollTop:0}, 'slow');//回到頂部 }) }) </script> </head> <body> <div class="scrollTop"></div> <input type="button" value="回到頂部"/> </body> </html>
上面的程式碼實現了我們的要求,程式碼非常的簡單,這裡就不多介紹了,更多內容可以參閱相關閱讀。
相關閱讀:
(1).animate()方法可以參閱jQuery animate()一章節。
(2).scrollTop屬性可以參閱js scrollTop一章節。
相關文章
- 具有彈性的點選返回網頁頂部程式碼網頁
- js點選返回網頁頂部程式碼例項詳解JS網頁
- 點選返回頂部程式碼具有緩衝效果
- 點選返回網頁頂層效果網頁
- 點選返回頂部效果實現程式碼詳解
- 網站返回頂部jquery js實現程式碼方式案例網站jQueryJS
- jquery實現返回頁面頂部功能。jQuery
- js之返回網頁頂部JS網頁
- jquery實現的點選返回頂部和底部特效詳解jQuery特效
- 網頁頂部導航選單程式碼例項網頁
- CSS-返回頂部程式碼CSS
- jQuery返回頂部按鈕詳解jQuery
- 點選返回上一頁程式碼例項
- 點選頂部彈出提示層程式碼例項
- css實現網頁”回到頂部“的程式碼效果CSS網頁
- jQuery頂部帶有選項卡的焦點圖效果jQuery
- js返回頂部JS
- js返回頁面頂部的實現(layui)JSUI
- 網站返回頂部功能視訊網站
- RecyclerView滑動到底部的時候點選按鈕直接返回頂部View
- js實現點選回到頂部JS
- JavaScript返回頂部詳解JavaScript
- jQuery之回到頂部jQuery
- Jquery回到頂部功能jQuery
- 手機直播原始碼,點選按鈕,立即回到頂部原始碼
- 簡單實現點選回到頂部
- TesterHome 首頁頂部的導航箭頭點選沒什麼效果
- 網頁頂部陰影邊框效果網頁
- HTML5商城開發五實現返回頁面頂部HTML
- 影片直播網站原始碼,flutter 頂部滾動欄頁面網站原始碼Flutter
- div有滾動條 返回頂部
- 一行程式碼搞定使用LinearLayoutManager一鍵返回頂部行程
- 網頁點選選擇設定文字不同顏色程式碼例項網頁
- 純js實現網頁返回頂部功能(萬能的相容目前所有瀏覽器)JS網頁瀏覽器
- jquery實現的點選頁面動畫方式平滑定位到某元素程式碼jQuery動畫
- jQuery點選滑出層效果程式碼例項jQuery
- jQuery點選回車事件程式碼例項jQuery事件
- jQuery文字從頂部掉落效果jQuery