大图像滚动

Question

我有一个780px宽和8400px高度的居中div的HTML页面。这个div上有一个背景图片。现在我有一个滚动条垂直向下滚动，这很好。我想保持这种方式。但我也有两个按钮（上一个和下一个）。当我点击下一个我想要我的容器向下滚动1200px，当我按前一个我想我的容器向上滚动1200px。但随后我的滚动条缩小了。并且我还可以继续按下一上一页按钮，另外，如果图像不可用了...

这是我的代码JQUERY：

$(document).ready(function (e) { 
    $(".scrolling_prev").click(function() { 
     $(".scrolling").animate({ "top": "+=1200px" }, 800); 
    }); 
    $(".scrolling_next").click(function() { 
     $(".scrolling").animate({ top: "-=1200px" }, 800); 
    }); 
}); 

这是我的标记：

<div class="centerSite"> 
     <div class="siteContainer"> 
      <nav></nav> 
      <div class="content"> 
       <div class="scrolling"></div> 
       <div class="scrolling_prev"></div> 
       <div class="scrolling_next"></div> 
      </div> 
      <footer></footer> 
     </div> 
    </div> 

任何人都可以帮忙吗？

Answer 1

您正在寻找在错误的财产，顶部将只是移动你的形象，而不是滚动它，如果你想滚动它，使用scrollTop的

http://jsfiddle.net/dxMTX/11/

$('#prev').click(function() { 
    $('#outer').animate({'scrollTop':'-=1200'}); 
}); 
$('#next').click(function() { 
    $('#outer').animate({'scrollTop':'+=1200'}); 
});