Question

正如您在this fiddle中看到的那样，我试图让用户使用左右箭头键移动到不同的部分（每个部分都是窗口的大小）页。

以下是我使用的Javascript示例：

var windowHeight = $(window).height(), windowWidth = $(window).width();

$(".slide").css("height", windowHeight);
$(".slide").css("width", windowWidth);

$(window).resize(function () {
    "use strict";
    var windowHeight = $(window).height(), windowWidth = $(window).width(), centerHeight = windowHeight / 2, centerWidth = windowWidth / 2;

    $(".slide").css("height", windowHeight);
    $(".slide").css("width", windowWidth);

});

function leftArrowPressed() {
    "use strict";
    var windowHeight = Math.abs($(window).height()) * -1;
    $("html, body").animate({ scrollTop: "+=" + windowHeight});
}

function rightArrowPressed() {
    "use strict";
    var windowHeight = $(window).height();
    $("html, body").animate({ scrollTop: "+=" + windowHeight });
}

document.onkeydown = function (evt) {
    "use strict";
    evt = evt || window.event;
    switch (evt.keyCode) {
    case 37:
        leftArrowPressed();
        break;
    case 39:
        rightArrowPressed();
        break;
    }
};

这在很大程度上起作用;当用户按下左/右箭头键时，它会向上/向下移动窗口。高度。这个问题是，当用户滚动页面一点时，当用户返回按箭头键时，它会变得不正常。

解决这个问题最简单的是什么？我会接受使用href和id属性，以及jQuery，甚至是简单的舍入，以确保它恢复为默认值。提前谢谢！

Answer 1

不要使用窗口的高度，而是尝试使用该部分的offset。如果您有某个元素，则它的偏移量表示从顶部开始的空间量。使用它代替+ =。

这是一个更新的小提琴：http://jsfiddle.net/VuVW6/1/

基本上，使用此方法，您将始终到达每个部分的顶部。

这是JS的更新部分。其他一切都可以保持不变：

var current = 0;
var sections = $(".slide")
function leftArrowPressed() {
    "use strict";
    current -= 1;
    current = Math.min(sections.length-1, Math.max(current, 0));
    $("html, body").animate({ scrollTop: sections.eq(current).offset().top});
}

function rightArrowPressed() {
    "use strict";
    current += 1;
    current = Math.min(sections.length-1, Math.max(current, 0));
    $("html, body").animate({ scrollTop: sections.eq(current).offset().top});
}

请注意使用offset()如何使其始终为滚动顶部提供正确的值。（不再依靠数学来解决）

另外，只是一个提示：在下一个动画调用之前调用finish（），以便清除动画队列。不想要任何无限循环。：）

使用箭头键控制页面位置

1 个答案: