jquery隱藏向上按鈕，當在垂直滾動頂部和隱藏谷底底部

我有一個垂直滾動，我想隱藏向上按鈕，當我在頂部，當我在底部時隱藏底部按鈕。我知道Jquery必須有這樣的方法，但我無法完成它的工作。請參閱http://jsfiddle.net/afnguyen/wjALk/jquery隱藏向上按鈕，當在垂直滾動頂部和隱藏谷底底部

或以下是代碼：

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&amp;from=search&amp;tags=%7C20000&amp;param=Comfort&amp;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&amp;from=search&amp;tags=%7C20000&amp;param=Comfort&amp;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); 
      }); 
     });

謝謝！

來源

2013-05-08 anna

感謝以下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(); 
     } 
    }); 
});

來源

2013-05-08 10:27:42 anna

jquery隱藏向上按鈕，當在垂直滾動頂部和隱藏谷底底部

回答

相關問題