jquery - jquery垂直选项卡中点击不同选项卡时如何使页面滚动到顶部

Question

我是网页设计的初学者。我使用 Jquery 垂直选项卡( http://jqueryui.com/tabs/#vertical)codes 在我的网站中创建 6 个选项卡。但是当单击选项卡时，它不会滚动到页面顶部。因此，使其成为人们很难阅读每个选项卡的描述和内容。他们必须一直滚动到顶部。

这些是我正在使用的默认代码。

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

<script>
    $(function() {
        $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
        $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
    });
</script>

有人可以告诉我如何添加代码，使单击每个选项卡时网页滚动回顶部。我将非常感谢你的帮助。谢谢

Answer 1

引用自source 。 scrollTo(x, y) 方法将内容滚动到指定坐标。

scrollTo(0,0) 应该可以完美地满足您的目的。

$( "#tabs li" ).click(function() {
   //user clicked on the li
   scrollTo(0,0);
});

如果需要滚动到元素的开头，首先需要计算该元素相对于文档的偏移量。为此，我们可以使用.offset() method .

$("#tabs li").click( function(){
    var tabs_offset = $("#tabs").offset();
    scrollTo(tabs_offset.left, tabs_offset.top);
});