jquery平滑滾動(dòng)到頂部插件使用詳解
更新時(shí)間:2017年05月08日 11:33:23 作者:sunny_desmond
這篇文章主要為大家詳細(xì)介紹了基于jquery平滑滾動(dòng)到頂部插件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
點(diǎn)擊一個(gè)固定按鈕,平滑的滾動(dòng)到窗口頂部的這種功能,在前端開發(fā)是相當(dāng)常見的,如圖:
關(guān)鍵代碼:
$.fn.scrollTo = function(options) { var defaults = { toT: 0, //滾動(dòng)目標(biāo)位置 durTime: 500, //過渡動(dòng)畫時(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 });
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于jquery實(shí)現(xiàn)頁面滾動(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)建平滑的頁面滾動(dòng)(頂部或底部)
相關(guān)文章
JQuery防止退格鍵網(wǎng)頁后退的實(shí)現(xiàn)代碼
有時(shí)我們需要防止退格鍵的網(wǎng)頁后退,一般情況下最好不要這么用,因?yàn)閷?duì)UX體驗(yàn)不好2012-03-03jquery實(shí)現(xiàn)類似淘寶星星評(píng)分功能實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)類似淘寶星星評(píng)分功能,詳細(xì)介紹了相應(yīng)jQuery事件的用法實(shí)例,需要的朋友可以參考下2014-09-09IE中的File域無法清空使用jQuery重設(shè)File域
IE中的File域無法清空,可能你看到的是已經(jīng)沒有值了,其實(shí)它還是存在的,下面有個(gè)不錯(cuò)示例,大家可以參考下2014-04-04jQuery操作動(dòng)態(tài)生成的內(nèi)容的方法
這篇文章主要介紹了jQuery操作動(dòng)態(tài)生成的內(nèi)容的方法,對(duì)比分析了bind與live方法,說明了live方法在處理新增元素時(shí)的作用,需要的朋友可以參考下2016-05-05