jquery平滑滾動到頂部插件使用詳解
更新時間：2017年05月08日 11:33:23 作者：sunny_desmond
這篇文章主要為大家詳細介紹了基于jquery平滑滾動到頂部插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
點擊一個固定按鈕，平滑的滾動到窗口頂部的這種功能，在前端開發(fā)是相當(dāng)常見的，如圖：
關(guān)鍵代碼：
$.fn.scrollTo = function(options) {
var defaults = {
toT: 0, //滾動目標位置
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, //滾動條目標位置和當(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)文章
最近，項目使用了JqGrid，但需要打印Grid里面的數(shù)據(jù)。使用的是CSS屬性中的Media媒體類型來控制打印樣式。2011-05-05
用了post方法去處理ajax回調(diào)的json數(shù)據(jù)，死活取不到，后臺就是有json返回了，關(guān)于這個問題的解決方法如下，你若遇到可以看看2014-11-11
下面小編就為大家?guī)硪黄狫query元素追加和刪除的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
下面小編就為大家?guī)硪黄猨query之基本選擇器practice(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
當(dāng)鼠標移到table行時會隨著改變顏色，在視覺上有一定的辨別效果，下面有個不錯的示例，大家不妨參考下2014-05-05
這篇文章主要介紹了jquery中animate的stop()方法作用,實例分析了animate的stop()方法在視頻播放代碼中的使用技巧,感興趣的朋友可以對比分析一下帶stop方法與不帶stop方法運行效果的區(qū)別,需要的朋友可以參考下2015-01-01
jQuery EasyUI中對表格進行編輯的實現(xiàn)代碼
對表格進行增刪改后一次性保存或回滾的發(fā)生相當(dāng)有用。參照官方的教程例子做了個用戶管理的小例子。2010-06-06
在網(wǎng)頁上只有一個小區(qū)域，但是說明性的文字又很長，下面這段腳本實現(xiàn)的是長文字的部分顯示，有類似需求的朋友可以參考下哈，希望對你有所幫助2013-05-05
不錯的用jquery實現(xiàn)的，字符串截取功能實現(xiàn)代碼。2009-06-06
jquery中show()、hide()和toggle()用法實例
這篇文章主要介紹了jquery中show()、hide()和toggle()用法,以實例形式分析了show()、hide()和toggle()在顯示、隱藏及切換等應(yīng)用技巧,需要的朋友可以參考下2015-01-01