jQuery插件scrollToBySpeed页面滚动示例

使用方法

引入插件文件到你的网页中,你可能还需要引入jQuery文件,因为这个插件依赖于jQuery库。

<script src="jquery.js"></script>

<script src="scrolltobyspeed.jquery.js"></script>

现在,当我们想要的窗口滚动我们给它的速度而不是时间。

$('#element').scrollToBySpeed({

  speed: 1000

});

我们还可以再加上一个偏移量到目的地的滚动位置。

$('#element').scrollToBySpeed({

  speed: 1000,

  offset: -100

});

设置动画的缓存效果。

$('#element').scrollToBySpeed({

  easing: 'linear'

});

默认滚动的语境是整个窗口。在另一个滚动元件的滚动指定上下文作为一个选择器的字符串或一个jQuery对象。

$('#element').scrollToBySpeed({

  context: '.foo'

});

如果自定义宽松或回调的需要,使用插件来获得时间和手动动画。

function () {

  var $element = $('#element'),

      duration = $element.scrollToBySpeed({mode:'duration'});

  ...

}

 

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索网页
, 字符串
, 文件
, 对象
, 缓存
时间
jquery scrollto、jquery.scrollto.js、jquery scrolltofixed、jquery scrollto 插件、jquery scrollto 动画,以便于您获取更多的相关知识。

时间: 2024-11-18 03:20:43

jQuery插件scrollToBySpeed页面滚动示例的相关文章

jQuery插件实现无缝滚动特效_jquery

首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b

jquery 固定菜单页面滚动效果

在一个单页面设置一个主菜单,当页面滚动时主菜单位置固定在页面窗口中不动,或左或右,或上或下.当单击菜单项时,页面滚动到菜单对应的内容区,当页面滚动到预定内容位置时,对应的菜单项变为当前选中样式. HTML 本例html来自本站文章:ScrollTo:平滑滚动到页面指定位置中的DEMO,我们在页面中的#main内放置一个主菜单ul.nav,并对应每个菜单项的内容区,我们会发现内容区的id对应菜单项的class,接下来你会发现它的作用.  代码如下 复制代码 <div id="main&quo

基于jQuery插件的页面功能介绍引导页示例

新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力. 查看演示 下载源码 之前也有相关文章介绍:<构建一个用于产品介绍的WEB应用>,相信对有需要的朋友有帮助.本文将介绍另一款基于jQuery的页面引导页插件:pagewalkthrough.js,来看如何使用它. HTML 首先记得加载所需的css文件和jQuery库文件,以及pagewalkthrough插件.   <!

JQuery 实现的页面滚动时浮动窗口控件_jquery

1. Introduction: 这个控件能够实现的效果是当你的页面滚动时,某个DIV永远停留在你需要它停留的位置.同时可以为这个DIV设定个容器,当滚动条已经超过了这个容器,那么这个DIV就不再滚动了.有时候如果需要做个比较好用的导航条,使用这个控件挺不错的. 2. Code & Properties: 这个js文件是在jQuery和JQeury UI的核心上扩展的.所以使用它前你必须到JQuery的官网下载那两个js文件,jquery.js和ui.core.js. 整个javascript如

jquery插件 - 跟随屏幕滚动的层

直接看DEMO选择使用即可. 跟随屏幕滚动的层插件 

jquery 页面滚动到底部自动加载插件集合

 很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容 很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件:    1. jQuery ScrollPagination   jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件.   2. jQuery Screw   Sc

jQuery插件multiScroll实现全屏鼠标滚动切换页面特效_jquery

经常看到在一些产品介绍页,看到全屏滚动的特效,今天推荐款jQuery插件给大家,jQuery全屏鼠标滚动切换页面特效插件multiScroll.js,支持众多的参数自定义配置,scrollingSpeed:切换速度.easing:动画效果.navigation:false是否出现导航,还支持事件Callback函数调用,onLeave.afterLoad等,效果还是和不错的,浏览器兼容方面:IE8, 9, Opera 12.以及现代的浏览器,需要浏览器支持CSS3属性,推荐学习和使用. 使用方法

jquery 页面滚动到底部自动加载插件集合_jquery

很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPagination jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件. 2. jQuery Screw Screw (scroll + view) 是一个 jQuery 插件当用户滚动页面的时候加载内容,是一个无限滚动翻页的插件. 3

jQuery弹出窗口居中,随页面滚动而滚动

方法一,自定弹出层 弹出层,我们常用到,这里分享一个别人的弹出层插件,页面滚动,弹出层用于居中于窗口中间位置. 假如HTML代码如下     代码如下 复制代码   <!DOCTYPE HTML>     <html>     <head>     <meta charset="utf-8">     <title>弹出层</title>     </head>     <body>