javascript - 当链接和目标位于不同文档中时使用 JQuery 平滑滚动

Question

我有一个网站，其中主要导航链接链接到 iframe 中加载的单个文档。如何使滚动更流畅的 iframe html 文档。我有一个示例代码可以在

$('ul.nav a').bind('click',function(event) 

但我无法捕获此事件，因为它在另一个文档中。

我应该如何进行水平滚动。

Answer 1

您正在使用 jQuery。所以你可以...

平滑滚动页面:

jQuery(window).animate({
   scrollTop:30px;
}, 200);

获取要滚动到的元素的 Top-Offset:

jQuery(element_you_want_to_scroll_to).offset().top

捕获链接的 href，以便浏览器不处理 href:

jQuery('ul.nav a').bind('click', function(event) { 
   /* your scrolling-code here */
   return false;
});

在 jQuery-Selector 中根据需要获取 iframe 元素:

您可以使用 iFrame 名称:

jQuery('your_selector', frames['your_iframe_name'].document)

或者您可以使用 iFrame Id:

jQuery('#your_iframe_id').contents().find('your_selector')

可能有用:

以正确的方式将变量传递给点击函数:

jQuery('ul.nav a').bind('click', {foo:'bar'}, function(event) { 
   alert(event.data.foo); //alert: 'bar'
   /* your scrolling-code here */
   return false;
});