我有一个垂直滚动，当我在顶部时隐藏向上按钮，当我在底部时隐藏底部按钮。我知道必须有一种方法可以用Jquery做到这一点，但我无法让它发挥作用。请参阅http://jsfiddle.net/afnguyen/wjALk/
或者下面是代码：
HTML：
<div class="twobytwostandard">
<div id="up">
up</div>
<div class="twobytwostandardmiddle">
<ul>
<li>
<div class="w6392597">
<a id="/81/177/6566/6acdca3a97bc4a8cb36ff28bee65bcf0" class="retailerlogo t6392597"
href="http://www.ocado.com/webshop/product/Dove-For-Men-Clean-Comfort-Deodorant-Stick/54639011?prevPageIndex=1&from=search&tags=%7C20000&param=Comfort&parentContainer=SEARCHComfort_SHELFVIEW"
title="" target="_blank">
<img src="http://static.e-talemedia.net/content/images/logos/ocado121x42.png" alt="" />
</a>
<img style="float: left;" src="http://static.e-talemedia.net/content/images/pixel1.png"
height="1" width="1" border="0" alt="" />
<a id="/81/177/6566/b2e91de1815045469d95e96f3abee719" class="retailerlogo t6392597"
href="http://www.ocado.com/webshop/product/Dove-For-Men-Clean-Comfort-Deodorant-Stick/54639011?prevPageIndex=1&from=search&tags=%7C20000&param=Comfort&parentContainer=SEARCHComfort_SHELFVIEW"
title="" target="_blank">
<img class="buynow" src="http://static.e-talemedia.net/content/images/dovebellinibuynowbutton.png"
alt="" />
</a>
</div>
</li>
<li>
<div class="w6392597">
<a id="/80/177/6566/8a1c11fba50449d7ac13d5aec2a88e3a" class="retailerlogo t6392597"
href="http://www.superdrug.com/deodorants/dove-men-care-stick-clean-comfort-50ml/invt/203346/"
title="" target="_blank">
<img src="http://static.e-talemedia.net/content/images/logos/superdrug121x42.png"
alt="" />
</a>
<img style="float: left;" src="http://static.e-talemedia.net/content/images/pixel1.png"
height="1" width="1" border="0" alt="" />
<a id="/80/177/6566/4c151c561c1b4ca582ff627c803ced63" class="retailerlogo t6392597"
href="http://www.superdrug.com/deodorants/dove-men-care-stick-clean-comfort-50ml/invt/203346/"
title="" target="_blank">
<img class="buynow" src="http://static.e-talemedia.net/content/images/dovebellinibuynowbutton.png"
alt="" />
</a>
</div>
</li>
<li>
<div class="w6392597">
<a id="/45/177/6566/6ca503308f9c44029a2e0b78cdbd4662" class="retailerlogo t6392597"
href="http://www.awin1.com/cread.php?awinmid=2041&awinaffid=108052&clickref=50220021&p=http%3A%2F%2Fwww.boots.com%2Fen%2FDove-Men-Care-Clean-Comfort-24h-Antiperspirant-Deodorant-Stick-50ml_1041885%2F"
title="" target="_blank">
<img src="http://static.e-talemedia.net/content/images/logos/boots121x42.png" alt="" />
</a>
<img style="float: left;" src="http://static.e-talemedia.net/content/images/pixel1.png"
height="1" width="1" border="0" alt="" />
<a id="/45/177/6566/e59a23e507f14369acb3989e46113327" class="retailerlogo t6392597"
href="http://www.awin1.com/cread.php?awinmid=2041&awinaffid=108052&clickref=50220021&p=http%3A%2F%2Fwww.boots.com%2Fen%2FDove-Men-Care-Clean-Comfort-24h-Antiperspirant-Deodorant-Stick-50ml_1041885%2F"
title="" target="_blank">
<img class="buynow" src="http://static.e-talemedia.net/content/images/dovebellinibuynowbutton.png"
alt="" />
</a>
</div>
</li>
<li>
<div class="w6392597">
<img class="retailerlogo1" src="http://static.e-talemedia.net/content/images/logos/tesco121x42fadedcolour.png"
alt="This retailer is currently out of stock, please choose from another retailer" />
</div>
</li>
</ul>
</div>
<div id="down">
down</div>
</div>
CSS：
.twobytwostandardmiddle
{
height: 278px;
width: 201px;
border: 1px solid #000;
overflow: hidden;
}
.w6392597
{
width: 300px;
height: 48px;
border: 1px solid #FF0000;
}
#up
{
width: 30px;
height: 20px;
background-color: #006600;
cursor: pointer;
}
#down
{
width: 40px;
height: 20px;
background-color: #006600;
cursor: pointer;
}
/* reset */
*
{
margin: -1px;
padding: 0;
}
img
{
border: none !important;
margin: 0px !important;
}
h1
{
font-family: arial;
font-weight: bold;
font-size: 24px;
color: #333;
}
.retailerlogo
{
float: left;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 5px;
margin-left: 7px;
}
.retailerlogo1
{
float: left;
padding-left: 7px;
padding-right: 0px;
padding-bottom: 5px;
margin-left: 5px;
}
.buynow
{
float: left;
padding-top: 8px;
}
.twobytwostandardmiddle
{
background-color: yellow;
height: 278px;
width: 201px;
}
body
{
width: 376px;
background-color: transparent;
}
.page
{
width: 376px;
background-color: transparent;
}
#main
{
width: 376px;
background-color: transparent;
}
.twobytwostandard
{
width: 376px;
height: 376px;
}
.twobytwostandard ul
{
float: left;
list-style: none;
margin: 0px 0px 0px 0px;
line-height: 100%;
background-color: transparent;
padding-top: 33px;
}
.twobytwostandard li
{
float: left;
height: 126px;
margin: -15px -47px 20px 8px;
}
.w6392597
{
background: none repeat scroll 0 0 transparent;
float: left;
height: 104px;
margin: 2px 23px 20px 22px;
overflow: hidden;
padding: 10px 3px 0;
width: 136px;
}
JQuery的：
$(document).ready(function () {
$(document).on("click", "#down", function () {
var scrollval = $('.w6392597').height();
var currentscrollval = $('.twobytwostandardmiddle').scrollTop();
$('.twobytwostandardmiddle').scrollTop(scrollval + currentscrollval);
});
$(document).on("click", "#up", function () {
var scrollval = $('.w6392597').height();
var currentscrollval = parseInt($('.twobytwostandardmiddle').scrollTop());
$('.twobytwostandardmiddle').scrollTop(currentscrollval - scrollval);
});
});
谢谢！
答案 0 :(得分：0)
感谢以下Vertical scrolling using jQuery我已经能够适应我的工作：
http://jsfiddle.net/afnguyen/wjALk/3/
JQuery的：
$(document).ready(function(){
$("#up").hide();
// get the number of .child elements
var totalitems = $(".twobytwostandardmiddle .w6392597").length;
// get the height of .w6392597
var scrollval = $('.w6392597').height();
// work out the total height.
var totalheight = (totalitems*scrollval)-($(".twobytwostandardmiddle").height());
$(document).on("click", "#down",function(){
var currentscrollval = $('.twobytwostandardmiddle').scrollTop();
$('.twobytwostandardmiddle').scrollTop(scrollval+currentscrollval);
// hide/show buttons
if(currentscrollval == totalheight) {
$(this).hide();
}
else {
$("#up").show();
}
});
$(document).on("click", "#up",function(){
var currentscrollval = parseInt($('.twobytwostandardmiddle').scrollTop());
$('.twobytwostandardmiddle').scrollTop(currentscrollval-scrollval);
// hide/show buttons
if((scrollval+currentscrollval) == scrollval) {
$(this).hide();
}
else {
$("#down").show();
}
});
});