Question

我似乎无法按照我想要的方式运行。我希望用户单击链接，在这种情况下Learn More然后打开一个选项卡并向下滚动页面到该选项卡所在的位置。我有打开标签工作的功能，但它不会滚动。我唯一可以让它实际滚动的是复制：

jQuery(document).scrollTop( jQuery("#" + descriptionID).offset().top );

进入chrome的控制台并激活它。以下是完整的代码：

jQuery(document).on("click", ".learnMore", function() {
    description = jQuery("a.ui-tabs-anchor:contains('Description')").parent().index();
    descriptionID = jQuery("a.ui-tabs-anchor:contains('Description')").attr('id');
    jQuery(".ui-widget").tabs("option", "active", description);
    jQuery(document).scrollTop( jQuery("#" + descriptionID).offset().top );
});

以下是指向fiddle

的链接

Answer 1

这是因为当您点击链接时，它会触发哈希更改。因为没有要转到的锚点，所以在调用scrollTop之后，它会滚动到顶部。将return false;添加到点击事件的末尾或为更现代的浏览器添加e.preventDefault();应该可以解决问题。

http://jsfiddle.net/jmarikle/dL41forj/

jQuery(document).on("click", ".learnMore", function() { ... return false; });

或

jQuery(document).on("click", ".learnMore", function(e) { e.preventDefault(); ... });

Answer 2

设置超时并定位正文也可以：http://jsfiddle.net/o2whkLyu/1/

$(document).on("click", ".learnMore", function() {
    description = jQuery("a.ui-tabs-anchor:contains('Description')").parent().index();
    descriptionID = jQuery("a.ui-tabs-anchor:contains('Description')").attr('id');
    jQuery(".ui-widget").tabs("option", "active", description);
    setTimeout (function(){
        $('body').scrollTop( $("#" + descriptionID).offset().top );}, 20);
});

jQuery没有滚动到锚标签

2 个答案: