<!DOCTYPE html>
<html lang="en" class="js">
<head>
<title>.scrollTo() jQuery API</title>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<style>
#jq-primaryContent { float:left; width:100%
!important; }
#jq-content { padding:5px; }
</style>
</head>
<body id="jq-interior" class="api-jquery-com
single jq-enhanced">
<div id="jq-content" class="jq-clearfix">
<div id="jq-primaryContent">
<div id="content">
<div id="post-331"
class="hentry p1 post publish category-custom-effects
category-1.0 untagged y2009 m11 d14 h07">
<div
class="entry-content<?= $banner_wrap; ?>">
<div id="animate1" class="entry method">
<div class="jq-box roundBottom entry-details">
<h4>Demo:</h4>
<div class="demo code-demo">
<style>
#demo1 { position:relative; height:60px; }
#demo-nav { position:absolute; top:5px; margin:5px; }
#demo-nav span { font-size:12px; }
#demo-stage { position:relative; display:block;
top:40px; background:#fff; height:60px; overflow:auto; }
#demo-stage li, #demo-stage li h3 { color:#777;
list-style: none; text-align: center; }
#demo-stage li.active, #demo-stage li.active h3 {
color:#000; }
</style>
<script>
$(function() {
/*!
* jQuery - .scrollTo()
*
* Author:
* Timothy A. Perez
*
* Date: OCT 2012
* Comments: Setting new web standards...
*/
// .scrollTo - Plugin
$.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() - settings.offsetTop;
scrollPane.animate({scrollTop : scrollY },
settings.duration, settings.easing, function(){
if (typeof callback == 'function') {
callback.call(this); }
});
});
}
// [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) - 20;
});
$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 Chapter
next = (last + 1 == $chapters.length) ?
0 : last + 1; // Loop around to first chapter
break;
case 2: // Action - Last Chapter
next = $chapters.length - 1;
break;
case 3: // Action - First Chapter
next = 0;
break;
}
$chapters.eq(next).addClass('active'); // Set Next
Chapter Active
$('#demo-stage').scrollTo($chScrollPositions[next]);
});
// [end] Demo Code //
});
setInterval(function() {
$('#demo-nav > nav > button.next').click()
},1000)
</script>
<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 1</h3></li>
<li><h3>Chapter 2</h3></li>
<li><h3>Chapter 3</h3></li>
<li><h3>Chapter 4</h3></li>
<li><h3>Chapter 5</h3></li>
<li><h3>Chapter 6</h3></li>
<li><h3>Chapter 7</h3></li>
<li><h3>Chapter 8</h3></li>
<li><h3>Chapter 9</h3></li>
<li><h3>Chapter 10</h3></p></li>
</ul>
<div class="jq-clearfix"></div>
</section>
</div>
<!-- <iframe src="/index-blank.html"
width="565" height="125" style="border:
none;"></iframe> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- .post -->
</div><!-- #content -->
</div><!-- #jq-primaryContent -->
<!-- #jq-interiorNavigation -->
</div><!-- /#secondaryNavigation -->
</body>
</html>
JΛ̊KE