jQuery scrollTo, div not scrolling
I'm trying to use the scrollTo plugin for jQuery in order to scroll certain content horizontally:
HTML
<a id="back">Back</a>
<div id="placeholder">
<div id="content">Content goes here</div>
</div>
<a id="forward">Forward</a>
CSS
#placeholder { width: 640px; height: 480px; overflow: hidden; }
#content { width: 9999em; }
JavaScript
$("#back").click(function(){
$('#content').scrollTo({left:'-=100px'} , 500);
});
$("#forward").click(function(){
$('#content').scrollTo({left: '+=100px'} , 500);
});
I've tried applying scrollTo in so many ways now I begin to wonder if it's even compatible with the latest version of jQuery, which I'm using. There are no JavaScript errors showing up and I can get an alert or similar to be called inside the link functions, but #content does not want to 开发者_如何学Gomove. Am I missing something here?
The css 'left' property won't do anything unless it's position: relative, fixed, or absolute. Also, you can use .animate() instead of .scrollTo, because it sounds like whatever plugin you installed is simply extraneous.
Try this jsfiddle: http://jsfiddle.net/ndz5K/4/
I just changed (1) #content's CSS to relative, and (2) .scrollTo() to .animate()
Yes, include the following code snippet,
$("#clickhere").click(function() {
$('html, body').animate({
scrollTop: $("#scrolltodiv").offset().top
}, 2000);
return false;
});
精彩评论