jQuery scrollTo
来源:互联网 发布:部队网络保密心得体会 编辑:程序博客网 时间:2024/06/06 07:27
原文地址:http://lions-mark.com/jquery/scrollTo/
.scrollTo( target, options, [, complete] )Returns: jQuery
Description: Scroll page or scrollable element to a specific offset or target element.
version pending: 1.9.x.scrollTo( target, options, [, complete] )
targetA selector, element, or number.
optionsA map of additional options to pass to the method. Supported keys:
scrollTarget
: A element, string, or number which indicates desired scroll position.offsetTop
: A number that defines additional spacing above scroll target.duration
: A string or number determining how long the animation will run.easing
: A string indicating which easing function to use for the transition.
completeA function to call once the animation is complete.
The .scrollTo()
method animates page or element scrolling to a specified target. The specified target can be an integer, an element, or a variable referencing an element. The only required parameter is the target.
ScrollTo Properties and Values
Any numeric property values should be a single numeric value. The target and scrollTarget properties are the same with scrollTarget taking precedence over target. When passing a numeric value into either target or scrollTarget it must be an integer and not a string.
Durations are given in milliseconds; higher values indicate slower scrolling animation, not faster. The default duration is 500
milliseconds. The strings 'fast'
and 'slow'
can be supplied to indicate durations of 200
and 600
milliseconds, respectively.
Complete Function
If supplied, the complete
callback function is fired once scrolling is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this
is set to the DOM element being animated. If multiple elements are animated, the callback is executed once per matched element, not once for the scroll animation as a whole.
Basic Usage
To scroll the screen to a matched target element:
$('body').scrollTo('#target');
To scroll a particular scrollable element to a specified value:
$('#content').scrollTo(500);
Scrolling to a desired element with options set:
$('body').scrollTo('#post-5',{duration:'slow', offsetTop : '50'});
Plugin Source:
$.fn.scrollTo = function( target, options, callback ){ if(typeof options == 'function' && arguments.length == 2){ callback = options; options = target; } var settings = $.extend({ scrollTarget : target, offsetTop : 50, duration : 500, easing : 'swing' }, options); return this.each(function(){ var scrollPane = $(this); var scrollTarget = (typeof settings.scrollTarget == "number") ? settings.scrollTarget : $(settings.scrollTarget); var scrollY = (typeof scrollTarget == "number") ? scrollTarget : scrollTarget.offset().top + scrollPane.scrollTop() - parseInt(settings.offsetTop); scrollPane.animate({scrollTop : scrollY }, parseInt(settings.duration), settings.easing, function(){ if (typeof callback == 'function') { callback.call(this); } }); });}
Note: Currently the core jQuery library includes "<code>linear</code>" and "<code>swing</code>". To use other easing methods you will need to extend your easing methods via separate plugin.
Example: Click the button to animate the div with a number of different properties.
<!DOCTYPE html><html><head><style>#demo1 { position:relative; height:350px; }#demo-nav { position:absolute; top:5px; margin:5px; }#demo-stage { position:relative; display:block; top:40px; background:#fff; height:300px; overflow:auto; }#demo-stage li, #demo-stage li h3 { color:#777; }#demo-stage li.active, #demo-stage li.active h3 { color:#000; }</style><script src="http://code.jquery.com/jquery-latest.js"></script><script src="jquery-scrollTo.js"></script></head><body><div id="demo1"><section id="demo-nav"><nav><span>Scroll To: </span><button class="next">Next Chapter</button><button class="last">Last Chapter</button><button class="first">First Chapter</button></nav></section><section id="demo-stage" class="jq-clearfix"><ul><li><h3>Chapter {nth-child}</h3> <p>{content}</p></li></ul><div class="jq-clearfix"></div></section></div><script>// [start] Demo Code //var $chapters = $('#demo-stage').find('ul').children('li');var $chScrollPositions = new Array();// Cache Scroll Positions for Each Chapter$chapters.each(function(i){$chScrollPositions[i] = Math.round($(this).offset().top - $('#demo-stage').offset().top) - 10;});$chapters.eq(0).addClass('active'); // Set First Chapter Active on Start$('#demo-nav > nav > button').click(function(){var last = $chapters.parent().find('li.active').removeClass('active').index();var next;switch($(this).index()){case 1:// Action - Next Chapternext = (last + 1 == $chapters.length) ? 0 : last + 1; // Loop around to first chapterbreak;case 2:// Action - Last Chapternext = $chapters.length - 1;break;case 3:// Action - First Chapternext = 0;break;}$chapters.eq(next).addClass('active'); // Set Next Chapter Active$('#demo-stage').scrollTo($chScrollPositions[next]);});// [end] Demo Code //</script></body></html>
- jQuery scrollTo
- jquery.scrollTo-min.js
- scrollTo without using jQuery
- ScrollTo
- scrollTo
- scrollTo()
- JQuery插件:ScrollTo平滑滚动到页面指定位置
- scrollTo和scrollTo.js
- JavaScript scrollTo() JavaScript scrollBy() jQuery CSS 操作 - scrollTop() 方法jQuery CSS 操作 - scroll
- window.scrollTo
- view.scrollto
- ScrollBy & ScrollTo
- window.scrollTo(1210,1120);
- scrollTo vs scrollBy
- scrollTo(sx, getScrollY())
- scrollBy scrollTo使用方法
- scrollTo 与 scrollBy
- window.scrollTo(100,600);
- Spark编程指南(Python版)
- 使用HttpURLConnection实现文件下载
- ==和equals的区别
- 矩阵的操作
- 南大软院大神养成计划——第十八天
- jQuery scrollTo
- chrome开发者工具功能拾遗:Sources面板篇
- iOS开发 - 百度地图
- unity与Android的交互
- U-boot mkimage指定Linux内核地址时的两种方式
- 【动态规划+递归】:poj1191,棋盘分割
- Asp.net mvc 使用echart的一点点经验
- USACO 3.3 Shopping Offers商店购物
- Android电话拨号器