Question

当我在select选项事件上显示隐藏的div时，我正在尝试获取焦点，或滚动到焦点。我是jQuery的新手，但在这个脚本上尝试了$('#id').focus();和scrollIntoView()之类的东西 -

$(function() {
    $('#continue').change(function(){
        if ($(this).val()) {
            $('#hidden').slideDown(2000)
            $('#hidden').show()  
            $('#continue').focus();         
        } else {
            $('#hidden').hide();
        }
    });
});

- 但我不确定这些是否是我正在寻找的功能。

如果你看一下http://jsfiddle.net/snqL2pf9/10/，你会看到如果你在那里选择你最喜欢的水果，我会滑下一个隐藏的div。但是，隐藏的div只是向下滚过查看窗口。当隐藏的div显示时，我希望整个表单在查看窗口中具有完全焦点。因此，基本上，随着表单的其余部分向下滑动，查看窗口向下滚动以将所有内容都放入视图中，而不是在当前视点下方消失的隐藏内容。这可能吗？

Answer 1

你可以在slideDown中设置一个回调函数，然后在完成后滚动页面，如下所示：

$('#hidden').slideDown(2000, "linear", function(){
            var scrollDistance = $("#continue")[0].offsetTop;
            window.scrollTo(0,scrollDistance);
        });

http://jsfiddle.net/snqL2pf9/17/

编辑：如果你想要window.scroll动画，你可以使用它来代替window.scrollTo

window.scroll({
  top: scrollDistance, 
  left: 0, 
  behavior: 'smooth' 
});

当隐藏的div出现时，整个表单保持焦点

1 个答案: