Why isn't jQuery scrollTo() working?
I am trying to use a very simple implementation of the scrollTo plugin:
http://jsfiddle.net/TPQyY/
But I can't get it to work. Any idea why it's not scrolling horizontally to reveal the next image in the list?
<!doctype html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function() {
$('.next').click(function(e) {
$('ul#scrollThis').scrollTo( 'li:eq(1)', 1000, {axis:'x'} );
e.preventDefault();
});
});
</script>
<style>
@import "http://developer.yahoo.com/yui/build/reset/reset.css";
body { padding: 10开发者_StackOverflow中文版0px; }
ul { list-style-type: none; width: 50px; height: 50px; overflow: hidden; }
ul li { float: left; }
</style>
<ul id="scrollThis">
<li><img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" width="50" height="50" /></li>
<li><img src="http://www.thecouchsessions.com/wp-content/uploads/2011/08/fat-cat.jpg" width="50" height="50" /></li>
<li><img src="http://static.howstuffworks.com/gif/dog-best-friend-1.jpg" width="50" height="50" /></li>
</ul>
<a href="" class="next">Next >></a>
The problem is the width which you have assigned to ul. It is sufficient enough to accomodate only one li. So the rest li's are wrapping down even though you have set float:left to them.
What you need is to have a wrapper div around ul which should have the height and width required for a single li item to be shown. The width of the ul should be the total width of all the li's. After you do this apply scrollTo plugin on the wrapper div.
Working demo
Forget the plugin for a second, you are using an unordered list so the images are actually one after the other vertically, not horizontally. You can see this by removing the overflow: hidden css style.
So you have a vertical list (down the Y axis) and you are locking the plugin to only scroll the x axis. If you remove the {axis:'x'} argument you will see it scroll vertically.
If you want it to scroll horizontally then you just need to change your CSS for the UL to appear one after the other horizontally.
UPDATE
To achieve the horizontally aligned items (and therefore the horizontal scrolling), you need to change the UL to be wide enough to accomodate all of the items side by side (if you limit the width of the UL it will just push items down to the next line), and set white-space to nowrap.
Then set the LI's to display:inline (or you could use float:left I believe).
Now you have the items side by side, you need to crop the view so only one is displayed. To do this wrap the UL in a container div and on this set the width and height so only one item is displayed and overflow to hidden.
Finally change your scrollto, to tell the container to scroll not the list.
This should achieve the result you are after.
<!doctype html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function() {
$('.next').click(function(e) {
$('#container').scrollTo( 'li:eq(1)', 1000, {axis:'x'} );
e.preventDefault();
});
});
</script>
<style>
@import "http://developer.yahoo.com/yui/build/reset/reset.css";
body { padding: 100px; }
ul { list-style-type: none; white-space: nowrap; width: 70000px; }
ul li { display: inline; }
#container { width:50px; height:50px; overflow:hidden; }
</style>
<div id="container">
<ul id="scrollThis">
<li><img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" width="50" height="50" /></li>
<li><img src="http://www.thecouchsessions.com/wp-content/uploads/2011/08/fat-cat.jpg" width="50" height="50" /></li>
<li><img src="http://static.howstuffworks.com/gif/dog-best-friend-1.jpg" width="50" height="50" /></li>
</ul>
</div>
<a href="" class="next">Next >></a>
Main problem is that flesler is alerting you that you have to reupload that js file... Try my own plugin
http://jsfiddle.net/TPQyY/6/
works fine
(function($){
$.fn.scrollTo = function(minus){
if (!minus) minus = 0;
var container = $("body");
var scrollTo = $(this);
if (scrollTo && container){
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top - minus
});
}
}
})(jQuery);
$(function() {
$('.next').click(function(e) {
$('ul#scrollThis').scrollTo();
return false;
});
});
I'm the creator of jQuery.scrollTo. I think 2 people already answered correctly (it's a CSS thing) so I won't repeat it.
I just wanted to add that in order to use a modern version, ensure availability and consistency you can either:
- download it from https://github.com/flesler/jquery.scrollTo/releases and host it yourself
- Hotlink to one of the free CDN services hosting the plugin
- https://cdnjs.com/libraries/jquery-scrollto
- http://www.jsdelivr.com/#!jquery.scrollto (not the latest)
加载中,请稍侯......
精彩评论