在網頁中,滾動條已經成為頁面的基本組件之一,尤其是在較長的頁面中。當我們閱讀完一個較長的頁面后,需要頻繁的向上滑動,返回頂部。jquery提供了一個簡單的方法,可以讓我們輕松地在網頁中實現“返回頂部”的功能。
首先,在頁面的head標簽中引入jquery的js文件:
然后,在頁面中添加一個按鈕,用于觸發返回頂部的功能:
接著,在頁面的script標簽中添加以下代碼:
代碼解析如下:
1. $(function(){})函數,是jquery中頁面加載完畢后的回調函數。
2. $(window).scroll(function(){}),是監測滾動條滾動的回調函數,如果滾動條的距離大于100,那么就讓按鈕漸漸地出現;如果不大于100,就讓按鈕漸漸地消失。這里的100是指滾動條距頂部的距離,可以根據需要自行更改。
3. 針對按鈕的點擊事件,點擊按鈕后,將頁面的滾動條滾動到頂部,動畫持續時間為1000毫秒,也就是1秒。
以上就是jquery返回頂部引用方法的具體實現,通過這個方法,我們可以使得網頁變得更加友好,為用戶提供更好的網頁體驗。
首先,在頁面的head標簽中引入jquery的js文件:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
然后,在頁面中添加一個按鈕,用于觸發返回頂部的功能:
<button id="back-to-top">返回頂部</button>
接著,在頁面的script標簽中添加以下代碼:
$(function(){ $(window).scroll(function(){ if ($(window).scrollTop()>100){ $("#back-to-top").fadeIn(1000); }else{ $("#back-to-top").fadeOut(1000); } }); $("#back-to-top").click(function(){ $('body,html').animate({scrollTop:0},1000); return false; }); });
代碼解析如下:
1. $(function(){})函數,是jquery中頁面加載完畢后的回調函數。
2. $(window).scroll(function(){}),是監測滾動條滾動的回調函數,如果滾動條的距離大于100,那么就讓按鈕漸漸地出現;如果不大于100,就讓按鈕漸漸地消失。這里的100是指滾動條距頂部的距離,可以根據需要自行更改。
3. 針對按鈕的點擊事件,點擊按鈕后,將頁面的滾動條滾動到頂部,動畫持續時間為1000毫秒,也就是1秒。
以上就是jquery返回頂部引用方法的具體實現,通過這個方法,我們可以使得網頁變得更加友好,為用戶提供更好的網頁體驗。