用單獨的'按鈕'滑動每個div jquery

我有一組全寬/高度的div，在瀏覽器窗口底部有一個'按鈕'可以滑動到下一個div。用單獨的'按鈕'滑動每個div jquery

基本HTML是

<main> 
    <div class="a"> 
     <div class="inner"> 
     <div class="inner"><a href="" class="down"></a></div> 
     </div> 
    </div> 
    <div class="b"> 
     <div class="inner"> 
     <div class="inner"><a href="" class="down"></a></div> 
     </div> 
    </div> 
    <div class="c"> 
     <div class="inner"> 
     <div class="inner"><a href="" class="down"></a></div> 
     </div> 
    </div> 
    <div class="d"> 
     <div class="inner"> 
     </div> 
    </div> 
</main>

和我有了這個第一個「向下」按鈕的工作 -

var $elem = $('.inner'); 

$('.down').click(
    function (e) { 
    $('html, body').animate({scrollTop: $elem.height()}, 560); 
    } 
);

如何修改jQuery的，使每個.down去滾動它呢？

在此先感謝

編輯：

在點擊了「向下」當jQuery的動畫「B」的那一刻「A」由動畫的HTML，身體向上。但我需要它每次都滾動到下一個div。因此，點擊'b'中的'down'會將頁面滾動到'c'的頂部，然後單擊'c'中的'down'將滾動頁面到'd'的頂部。

這是否使它更清晰？

來源

2013-08-02 Stuart Robson

'讓每個.down去滾動起來？'毫無意義，我... u能更多解釋 – bipen

如果我理解你是正確的，那麼每個'.inner'都有相同的高度，並且你可以點擊該高度來設置頁面。在任何情況下，這個位置都是第一個div的底部。您必須將位置與高度相加或相乘。 –

他意味着每次點擊'.down'滾動條向上滾動 –

嘗試

$('.down').click(
    function (e) { 
    var idx = $(this).parentsUntil('main').last().index(); 
    $('html, body').animate({scrollTop: $('main > div').eq(idx).scrollTop()}, 560); 
    } 
);

來源

2013-08-02 12:44:41

試試這個

DEMO

$('.down').click(
    function (e) { 
     var $elem= $(this).closest('.inner'); 

    $('html, body').animate({scrollTop: $elem.offset().top+$elem.height()}, 560); 
    } 
);

來源

2013-08-02 12:54:21

用單獨的'按鈕'滑動每個div jquery

回答

相關問題