欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

jquery平滑滚动到顶部插件使用详解

时间:2021-07-18 08:25:26|栏目:jquery|点击:

点击一个固定按钮,平滑的滚动到窗口顶部的这种功能,在前端开发是相当常见的,如图:

关键代码:

$.fn.scrollTo = function(options) { 
  var defaults = { 
    toT: 0, //滚动目标位置 
    durTime: 500, //过渡动画时间 
    delay: 30, //定时器时间 
    callback: null //回调函数 
  }; 
  var opts = $.extend(defaults, options), 
    timer = null, 
    _this = this, 
    curTop = _this.scrollTop(), //滚动条当前的位置 
    subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值 
    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; 
}; 
 
//调用 
 $("body").scrollTo({ toT: 0 }); 

上一篇:jQuery写的日历(包括日历的样式及功能)

栏    目:jquery

下一篇:jquery向后台提交数组的代码分析

本文标题:jquery平滑滚动到顶部插件使用详解

本文地址:http://www.codeinn.net/misctech/158683.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有