Question

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

$('.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

执行所需操作的最简单方法是使用本机scrollIntoView()方法：

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

所有主流浏览器的current versions都支持此功能，但如果您需要支持旧浏览器（例如IE 10及更低版本），则可以使用此polyfill。

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

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

将浏览器位置对准切换块

1 个答案: