jquery平滑滾動到頂部插件使用詳解
更新時間:2017年05月08日 11:33:23 作者:sunny_desmond
這篇文章主要為大家詳細介紹了基于jquery平滑滾動到頂部插件,具有一定的參考價值,感興趣的小伙伴們可以參考一下
點擊一個固定按鈕,平滑的滾動到窗口頂部的這種功能,在前端開發(fā)是相當(dāng)常見的,如圖:
關(guān)鍵代碼:
$.fn.scrollTo = function(options) { var defaults = { toT: 0, //滾動目標(biāo)位置 durTime: 500, //過渡動畫時間 delay: 30, //定時器時間 callback: null //回調(diào)函數(shù) }; var opts = $.extend(defaults, options), timer = null, _this = this, curTop = _this.scrollTop(), //滾動條當(dāng)前的位置 subTop = opts.toT - curTop, //滾動條目標(biāo)位置和當(dāng)前位置的差值 index = 0, dur = Math.round(opts.durTime / opts.delay), smoothScroll = function(t) { index++; var per = Math.round(subTop / dur); if (index >= dur) { _this.scrollTop(t); window.clearInterval(timer); if (opts.callback && typeof opts.callback == 'function') { opts.callback(); } return; } else { _this.scrollTop(curTop + index * per); } }; timer = window.setInterval(function() { smoothScroll(opts.toT); }, opts.delay); return _this; }; //調(diào)用 $("body").scrollTo({ toT: 0 });
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JQuery防止退格鍵網(wǎng)頁后退的實現(xiàn)代碼
有時我們需要防止退格鍵的網(wǎng)頁后退,一般情況下最好不要這么用,因為對UX體驗不好2012-03-03IE中的File域無法清空使用jQuery重設(shè)File域
IE中的File域無法清空,可能你看到的是已經(jīng)沒有值了,其實它還是存在的,下面有個不錯示例,大家可以參考下2014-04-04