在由 window.open 打开的窗口中滚动到没有 ID 的元素

Scrolling to an element without ID in a window opened by window.open

本文关键字：元素 ID 滚动 窗口 open window 在由      更新时间：2023-09-26

在我的页面顶部，我有一个包含几个项目的菜单，当我单击它们时，我使用以下代码行滚动到放置div 的页面点：

$('html, body').animate({scrollTop:$(divid).position().top - 160 }, 'slow');

其中 $(divid( 包含div 的类名(我正在使用 Drupal，所以不存在添加 ID 的可能性(。

这很流畅，但现在我在另一个页面中有相同的菜单。当我单击链接时，我导航到放置div 的页面，但我无法让它滚动到div。

经过大量的研究，我得出了这段代码

$('#block-views-footer-menu-block-2 .views-row-6 a').click(function(e){
    e.preventDefault();
    var newwindow = window.open('/aanbod', '_self');
    $(newwindow.document).ready(function(){
        to_position('.field-paragraphs:nth-of-type(6)');
    });
});

其中 to_position(( 包含本文中的第一行代码。

但是，to_position(( 函数在加载新窗口之前触发。这样，当 to_position(( 函数被触发时，'.field-paragraphs：nth-of-type(6(' 还不知道，所以函数无法访问它的位置。

我

真的看不出我做错了什么，任何帮助都是值得赞赏的。

提前感谢！

将信息传递给弹出窗口本身，让它为您进行滚动。

var newwindow = window.open('/aanbod?scrolltoposition=' + ".field-paragraphs:nth-of-type(6)", '_self');

现在，在这个新窗口中，添加代码以滚动要滚动到的位置

$(document).ready( function(){
   var elementSelector = location.search.split( "=" )[1];
   var $element = $( elementSelector );
   $('html, body').animate({scrollTop:$element.position().top - 160 }, 'slow');
} );

确保已在弹出窗口中包含 jQuery

如果你使用的是jQuery，你可以使用以下

    $(document).ready(function(){
    // your code
    });

在文档"准备就绪"之前，无法安全地操作页面。jQuery 会为您检测这种就绪状态。$( document (.ready(( 中包含的代码只有在页面文档对象模型 (DOM( 准备好执行 JavaScript 代码时才会运行。$( window (.load(function(( { ... }( 中包含的代码将在整个页面(图像或 iframe(准备就绪后运行，而不仅仅是 DOM。

相关文章：