javascript - 将浏览器位置聚焦在切换 block 上

Question

我有几个 ul block 和按钮可以打开它们的内容。当我按下按钮时 - block 下降，其中包含所有内容，但屏幕保持聚焦。但是当我向下滚动到 block 底部并按下按钮将其切换回隐藏模式时 - 浏览器屏幕向下移动到浏览器底部并且不会返回到关闭 block 的顶部(如预期的那样)

$('.ul' + l).append('<button type="button" onclick="$(this).myFunc()">Button</button>');

           $.fn.myFunc = function () {
           var ul = $(this).parent().attr('class');
           $('.' + ul + ' li:gt(5)').fadeToggle("fast");
                        };

我尝试了一些 $(window).focus 东西，添加了 fadeToggle("fast").preventDefault() 等，但没有任何帮助。有什么想法吗？

Answer 1

完成所需操作的最简单方法是使用 native scrollIntoView() 方法:

document.querySelector('.ul' + l).scrollIntoView({ 
    behavior: 'smooth' 
});

这在 current versions 中得到支持所有主流浏览器，但如果您需要支持旧版浏览器(例如 IE 10 及以下版本)，您可以使用此 polyfill .

根据下面的评论:您确实有一个 document 对象，我保证:document 是每个网页的基础。也就是说，如果需要，您可以改用 jQuery 选择器，但是您需要在使用 scrollIntoView 之前获取底层 DOM 对象(因为它不是 jQuery 方法。)

$('.ul' + l)[0].scrollIntoView({...});