jquery平滑滾動(dòng)到頂部插件使用詳解
點(diǎn)擊一個(gè)固定按鈕,平滑的滾動(dòng)到窗口頂部的這種功能,在前端開(kāi)發(fā)是相當(dāng)常見(jiàn)的,如圖:

關(guān)鍵代碼:
$.fn.scrollTo = function(options) {
var defaults = {
toT: 0, //滾動(dòng)目標(biāo)位置
durTime: 500, //過(guò)渡動(dòng)畫(huà)時(shí)間
delay: 30, //定時(shí)器時(shí)間
callback: null //回調(diào)函數(shù)
};
var opts = $.extend(defaults, options),
timer = null,
_this = this,
curTop = _this.scrollTop(), //滾動(dòng)條當(dāng)前的位置
subTop = opts.toT - curTop, //滾動(dòng)條目標(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 });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏
- jquery滾動(dòng)到頂部底部代碼
- 基于jquery固定于頂部的導(dǎo)航響應(yīng)瀏覽器滾動(dòng)條事件
- jQuery 頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部
- 使用jquery animate創(chuàng)建平滑滾動(dòng)效果(可以是到頂部、到底部或指定地方)
- jquery scrollTop方法根據(jù)滾動(dòng)像素顯示隱藏頂部導(dǎo)航條
- jQuery創(chuàng)建平滑的頁(yè)面滾動(dòng)(頂部或底部)
相關(guān)文章
JQuery防止退格鍵網(wǎng)頁(yè)后退的實(shí)現(xiàn)代碼
有時(shí)我們需要防止退格鍵的網(wǎng)頁(yè)后退,一般情況下最好不要這么用,因?yàn)閷?duì)UX體驗(yàn)不好2012-03-03
jquery實(shí)現(xiàn)類(lèi)似淘寶星星評(píng)分功能實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)類(lèi)似淘寶星星評(píng)分功能,詳細(xì)介紹了相應(yīng)jQuery事件的用法實(shí)例,需要的朋友可以參考下2014-09-09
IE中的File域無(wú)法清空使用jQuery重設(shè)File域
IE中的File域無(wú)法清空,可能你看到的是已經(jīng)沒(méi)有值了,其實(shí)它還是存在的,下面有個(gè)不錯(cuò)示例,大家可以參考下2014-04-04
jQuery簡(jiǎn)單入門(mén)示例之用戶(hù)校驗(yàn)demo示例
這篇文章主要介紹了jQuery簡(jiǎn)單入門(mén)示例之用戶(hù)校驗(yàn)demo示例,分析了基于jQuery的簡(jiǎn)單用戶(hù)校驗(yàn)功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-07-07
jQuery操作動(dòng)態(tài)生成的內(nèi)容的方法
這篇文章主要介紹了jQuery操作動(dòng)態(tài)生成的內(nèi)容的方法,對(duì)比分析了bind與live方法,說(shuō)明了live方法在處理新增元素時(shí)的作用,需要的朋友可以參考下2016-05-05

