快捷導(dǎo)航

jquery平滑滾動(dòng)到頂部插件使用詳解

更新時(shí)間：2017年05月08日 11:33:23 作者：sunny_desmond

這篇文章主要為大家詳細(xì)介紹了基于jquery平滑滾動(dòng)到頂部插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

點(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JqGrid web打印實(shí)現(xiàn)代碼
最近，項(xiàng)目使用了JqGrid，但需要打印Grid里面的數(shù)據(jù)。使用的是CSS屬性中的Media媒體類型來(lái)控制打印樣式。
2011-05-05
jQuery中ajax和post處理json的不同示例對(duì)比
用了post方法去處理ajax回調(diào)的json數(shù)據(jù)，死活取不到，后臺(tái)就是有json返回了，關(guān)于這個(gè)問(wèn)題的解決方法如下，你若遇到可以看看
2014-11-11
Jquery元素追加和刪除的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇Jquery元素追加和刪除的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
jquery之基本選擇器practice(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇jquery之基本選擇器practice(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
table行隨鼠標(biāo)移動(dòng)變色示例
當(dāng)鼠標(biāo)移到table行時(shí)會(huì)隨著改變顏色，在視覺(jué)上有一定的辨別效果，下面有個(gè)不錯(cuò)的示例，大家不妨參考下
2014-05-05
jquery中animate的stop()方法作用實(shí)例分析
這篇文章主要介紹了jquery中animate的stop()方法作用,實(shí)例分析了animate的stop()方法在視頻播放代碼中的使用技巧,感興趣的朋友可以對(duì)比分析一下帶stop方法與不帶stop方法運(yùn)行效果的區(qū)別,需要的朋友可以參考下
2015-01-01
jQuery EasyUI中對(duì)表格進(jìn)行編輯的實(shí)現(xiàn)代碼
對(duì)表格進(jìn)行增刪改后一次性保存或回滾的發(fā)生相當(dāng)有用。參照官方的教程例子做了個(gè)用戶管理的小例子。
2010-06-06
jQuery實(shí)現(xiàn)長(zhǎng)文字部分顯示代碼
在網(wǎng)頁(yè)上只有一個(gè)小區(qū)域，但是說(shuō)明性的文字又很長(zhǎng)，下面這段腳本實(shí)現(xiàn)的是長(zhǎng)文字的部分顯示，有類似需求的朋友可以參考下哈，希望對(duì)你有所幫助
2013-05-05
jquery 截取字符串的實(shí)現(xiàn)
不錯(cuò)的用jquery實(shí)現(xiàn)的，字符串截取功能實(shí)現(xiàn)代碼。
2009-06-06
jquery中show()、hide()和toggle()用法實(shí)例
這篇文章主要介紹了jquery中show()、hide()和toggle()用法,以實(shí)例形式分析了show()、hide()和toggle()在顯示、隱藏及切換等應(yīng)用技巧,需要的朋友可以參考下
2015-01-01