Question

我正在使用这些tabs但是当我点击标签时，它会产生快速top scroll effect。

尝试通过更改ID来使用以下脚本，但仍无效：

http://www.onextrapixel.com/examples/pure-css-tab-with-fade-animation/

jQuery("#button").click(function() {

    jQuery('html, body').animate({
        scrollTop: jQuery("#elementtoScrollToID").offset().top
    }, 2000);
});

Answer 1

听起来你有一个JavaScript错误，而标签只链接到＃，从而导致滚动到顶部。

Answer 2

快速滚动效果是由默认操作引起的，该操作是关注相关联的，在这种情况下，相关的复选框如下所示：

position: absolute;
top: -9999px;
left: -9999px;

由于焦点，它会回到页面顶部。有几种方法可以改变这一点。您可以选择不使用标签和复选框，而是添加一个活动类（因为您已经在使用jquery了......）[id^=tab]:checked ~ [id^=tab-content] {} - ＆gt; .active tab-content { }

因此，在点击时，您将在所选的LI或其他任何内容上添加“活动”类，并适当地更改CSS。

否则你可以阻止默认操作，然后在没有顶部滚动效果的情况下重新启动它，就像这样：

$('.tabs').on('click','label', function(e) { 
e.preventDefault() 
// Shouldn't need to UNCHECK the other ones since its a radio button
$(this).siblings('input').attr('checked','checked').trigger('click');
})

或者，这就是我最想要的，你隐藏输入无线电但不是现在隐藏的方式。你可以使用不透明度：0，显示：无或类似的东西，这样偏移是正确的，而不是顶部的-9999px。

希望这有帮助！

jquery在css3选项卡上滚动顶部

2 个答案: