jquery滚动到顶部
<script>
$.fn.scrollTo = function (options) { var defaults = { toT: , //滚动目标位置 durTime: , //过渡动画时间 delay: , //定时器时间 callback: null //回调函数 }; var opts = $.extend(defaults, options), timer = null, _this = this, curTop = _this.scrollTop(), //滚动条当前的位置 subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值 index = , 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: });
</script>
jquery滚动到顶部的更多相关文章
- 基于jQuery实现页面滚动时顶部导航显示隐藏效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- [jquery]判断页面滚动到顶部和底部(适用于手机web加载)
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
- js平滑滚动到顶部,底部,指定地方
[原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- jQuery滚动条回到顶部或指定位置
jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...
- JQuery 实现返回顶部效果
首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...
- [js常用]页面滚动的顶部,指定位置或底部,平滑滚动
js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- javascript+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- 一款基于jquery固定于顶部的导航
今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部.效果图如下: 在线预览 源码下载 实现的代 ...
随机推荐
- Linux内存中的Cache真的能被回收吗? 【转】
在Linux系统中,我们经常用free命令来查看系统内存的使用状态.在一个RHEL6的系统上,free命令的显示内容大概是这样一个状态: [root@tencent64 ~]# free ...
- ln bug
/home/hdp/testcpy sudo ln -s . /usr/lib/cpy390sourcecode cpy390sourcecode -> . sudo ln -s pwd /us ...
- 【MySQL】Mac通过brew安装的MySQL重启方法
问题 在 Mac 上通过 brew install mysql 安装的的MySQL使用基本MySQL命令重启会失败: mysql.server stop mysql.server start mysq ...
- Java基础 main 参数String[] args的用法
JDK :OpenJDK-11 OS :CentOS 7.6.1810 IDE :Eclipse 2019‑03 typesetting :Markdown code ...
- 转「服务器运维」如何解决服务器I/O过高的问题
问题缘起: 当我习惯性地用top查看任务运行状态时,发现我运行的100个任务,只有3个在运行,其他都在摸鱼状态.同时发现我的任务进程都是"D"状态(未截图),而不是R(运行)状态. ...
- Spring cloud微服务安全实战-5-12实现基于token的SSO(2)
我只要把这个meFilter放在AuthorizationFilter后面就可以了. authorizationFilter的排序是3 MeFilter设置为4 就可以了. 拿到了username直接 ...
- ES6深入浅出-10 ES6新增的数据类型-2.Set与数组去重
一种新的数据类型,它是对象的一种,Set,很像数组,又不是数组. Set 类型 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refe ...
- Egret中的对象池Pool
为了可以让对象复用,防止大量重复创建对象,导致资源浪费,使用对象池来管理. 一 对象池A 二 对象池B 一 对象池A 1. 支持传入构造函数 2. 支持预先创建对象 3. 支持统一执行函数 /** * ...
- 解决软件卸载时Abstract: "Invalid serial number" xe4
In RAD Studio, Delphi, C++Builder, XE4 there can become a scenario if you try to modify, repair, upg ...
- 【Leetcode_easy】944. Delete Columns to Make Sorted
problem 944. Delete Columns to Make Sorted 题意:其实题意很简单,但是题目的description给整糊涂啦...直接看题目标题即可理解. solution: ...