滾動到下一個 <div> 當按&#39;j&#39;時

Question

我想你們都在facebook上看過這個功能。 當您按下j ，滾動位置會跳到下一個故事，當您按k它會滾動到上一個故事。

現在，如果我有很多div與類.story （在片段中它們都具有相同的高度;但實際上，它們將是不同的），我如何瀏覽它們（滾動到下一個和上一個.story ）在Facebook上按j和k ？

 body{ background-color:#ecf0f1; } .story { background-color: #fff; border-radius: 5px; height: 500px; margin: 20px auto; width: 70%; } 

 <div class="story"> </div> <div class="story"> </div> <div class="story"> </div> <div class="story"> </div> <div class="story"> </div> <div class="story"> </div> <div class="story"> </div> <div class="story"> </div> <div class="story"> </div> <div class="story"> </div> 

Answer 1

 $(document).keypress(function(e){ var forward; if (e.keyCode == 106) { forward = true; } else if (e.keyCode == 107) { forward = false; } else { return true; } if (!$(".story.current").length) { $(".story:first").addClass("current"); } if ($(".story.current").length) { var current = $(".story.current"); var next; if (forward) { next = current.next(".story") } else { next = current.prev(".story"); } if (next.length) { current.removeClass("current"); next.addClass("current"); } else { alert("nope."); } } $("html, body").animate({ scrollTop: $(".current").offset().top }, 100); }); 

 body{ background-color:#ecf0f1; } .story { background-color: #fff; border-radius: 5px; height: 500px; margin: 20px auto; width: 70%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="story"> a </div> <div class="story"> b </div> <div class="story"> c </div> <div class="story"> d </div> <div class="story"> e </div> <div class="story"> f </div> <div class="story"> g </div> <div class="story"> h </div> <div class="story"> i </div> <div class="story"> j </div> 

Answer 2

我將再添加一個解決方案，在我看來有點簡單：

var $story = $('.story');

$(document).keyup(function(e) {
    var index;

    if (e.keyCode == 74) {
        index = $story.filter('.focused').index() + 1;
    }
    else if (e.keyCode == 75) {
        index = $story.filter('.focused').index() - 1;
    }

    if (index < $story.length && index >= 0) {
        $story.removeClass('focused').eq(index).addClass('focused');   
    }

    $("html, body").animate({ 
        scrollTop: $focused.offset().top 
    }, 200);
});

演示： http ： //jsfiddle.net/vfw15v7d/