<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滚动到顶部的更多相关文章

  1. 基于jQuery实现页面滚动时顶部导航显示隐藏效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  2. [jquery]判断页面滚动到顶部和底部(适用于手机web加载)

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  3. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

  4. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  5. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  6. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  7. [js常用]页面滚动的顶部,指定位置或底部,平滑滚动

    js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  9. 一款基于jquery固定于顶部的导航

    今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部.效果图如下: 在线预览   源码下载 实现的代 ...

随机推荐

  1. C# WinForm MessageBox弹窗倒计时的自动关闭

    [DllImport("user32.dll", EntryPoint = "FindWindow")]        private static exter ...

  2. 微信小程序之自定义底部弹出框动画

    最近做小程序时,会经常用到各种弹框.直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴.想要美美地玩,添加点动画还是非常有必要的.下面做一个底部上滑的弹框. wxml <view ...

  3. elementUI 列表里面含有多选框,当翻页的时候依然保持之前页多选不变

    el-table的type="selection"的使用 场景:el-table,type="selection"时,重新请求后,设置列表更新前的已勾选项 踩坑 ...

  4. 000 vue各种基本指令

    一:vue实例 1.实例 新建项目: 2.程序 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. Python写入csv文件示例

    import csv header = ['City', 'AQI', 'PM2.5/1h', 'PM10/1h', 'CO/1h', 'NO2/1h', 'O3/1h', 'O3/8h', 'SO2 ...

  6. 代替ESXI的虚拟机解决方案proxmox

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/matengbing/article/de ...

  7. openresty开发系列13--lua基础语法2常用数据类型介绍

    openresty开发系列13--lua基础语法2常用数据类型介绍 一)boolean(布尔)布尔类型,可选值 true/false: Lua 中 nil 和 false 为"假" ...

  8. java IO 文件批量重命名

    java IO 文件批量重命名 package com.vfsd.renamefile; import java.io.File; import java.io.FileInputStream; im ...

  9. 软件定义网络基础---OpenFlow协议

    一:OpenFlow协议概述 OpenFlow协议为控制器与交换机之间的通信,提供了一种开放标准的方式.OpenFlow交换机通过安全通道与控制器进行信息交互 二:OpenFlow消息类型 (一)co ...

  10. quasar 报错

    yarn是项目建议安装的方式,报错如下 npm 安装的项目,报错如下 情况:无论是哪种安装方式,似乎报错都出在同一个地方. 近况,还在解决中...