Question

在我的页面顶部，我有一个包含几个项目的菜单，当我点击它们时，我使用以下代码行滚动到放置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-paragraph：nth-of-type（6）'还不知道，所以函数无法访问它的位置。

我真的不明白我做错了什么，感谢任何帮助。

提前致谢！

Answer 1

将信息传递给弹出窗口，然后让它为你滚动。

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

Answer 2

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

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

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

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

2 个答案: