キーボード キー J & K を使用してブログの記事間をスクロールするスクリプトを使用しています。現在のコードは非常に乱雑で、現在 1 回しか機能しないというエラーがあります... J キーと K キーを使用して投稿間をスムーズにスクロールする簡単な方法があるかどうか疑問に思っています。大きく、もっと簡単な方法が必要です。このスクリプトは、jQuery ライブラリと scrollto.js を使用しています。基本的に、J キーと K キーを押したときに投稿間をスムーズにスクロールする別のスクリプトが必要です。
window.viewport = { height: function() { return $(window).height(); }, width: function() { return $(window).width(); }, scrollTop: function() { return $(window).scrollTop(); }, scrollLeft: function() { return $(window).scrollLeft(); } }; $.belowthefold = function(element, settings) { var fold = $(window).height() + $(window).scrollTop(); return fold <= $(element).offset().top - settings.threshold; }; $.abovethetop = function(element, settings) { var top = $(window).scrollTop(); return top >= $(element).offset().top + $(element).height() - settings.threshold; }; $.rightofscreen = function(element, settings) { var fold = $(window).width() + $(window).scrollLeft(); return fold <= $(element).offset().left - settings.threshold; }; $.leftofscreen = function(element, settings) { var left = $(window).scrollLeft(); return left >= $(element).offset().left + $(element).width() - settings.threshold; }; $.inviewport = function(element, settings) { return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings); }; $.extend($.expr[':'], { "below-the-fold": function(a, i, m) { return $.belowthefold(a, {threshold : 0}); }, "above-the-top": function(a, i, m) { return $.abovethetop(a, {threshold : 0}); }, "left-of-screen": function(a, i, m) { return $.leftofscreen(a, {threshold : 0}); }, "right-of-screen": function(a, i, m) { return $.rightofscreen(a, {threshold : 0}); }, "in-viewport": function(a, i, m) { return $.inviewport(a, {threshold : 0}); } });
$(document).keypress(function( event ) {
if(event.which === 106) {
var currPost = $('article:in-viewport').eq(0);
var target = $(currPost).next('article');
$.scrollTo( $(target), {
duration: 400,
axis: "y",
offset: -120
});
}
else if(event.which === 107) {
var currPost = $('article:in-viewport').eq(0);
var target = $(currPost).prev('article');
$.scrollTo( $(target), {
duration: 400,
axis: "y",
offset: -120
});
}
});
私がスクリプトを使用しているブログ - http://jtestblog1.tumblr.com/ 編集: オフセット -120 は、スクロールすると、パディングトップを含む記事全体が表示されるためです。