jQuery scrollTo
HTML
<div class="p">
<div id="c">
f
</div>
<div >
fdg dfg f
</div>
<div >
fdg dfg f
</div>
<div >
fdg dfg f
</div>
<div >
fdg dfg f
</div> <div >
fdg dfg f
</div>
<div >
fdg dfg f
</div>
<div >
fdg dfg f
</div>
<div >
fdg dfg f
</div> <div >
fdg dfg f
</div>
<div >
fdg dfg f
</div>
<div >
fdg dfg f
</div> <div >
fdg dfg f
</div>
<div >
fdg dfg f
</div>
<div >
fdg dfg f
</div>
<div id="ts">
222222222222222
</div> <div >
fdg dfg f
</div>
<div >
fdg dfg f
</div>
<div >
fdg dfg f
</div> <div >
fdg dfg f
</div>
<div >
fdg dfg f
</div>
<div id="t">
aaaaaaaaaaaaaa
</div>
<div >
fdg dfg f
</div>
</div>
CSS
.p {
border : 1px solid red;
height : 100px;
overflow: scroll;
}
#c {
border : 1px solid green;
height : 1000px;
}
JavaScript
$.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); }
});
});
}
var t = $("#ts").offset();
alert(t);
$(".p").scrollTo($("#ts").offset().top)
$(".p").scroll(function() {
var s = $(".p").scrollTop();
console.log(s);
});
$.fn.smooth = function(el) {
console.log(el)
}