jQuery不滚动到锚标记

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 );
});

这是小提琴的链接

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);
});