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

Question

我是网页设计的初学者。我使用 Jquery 垂直选项卡 ( http://jqueryui.com/tabs/#vertical ) 代码在我的网站中创建了 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

从源引用。The scrollTo(x, y) method scrolls the content to the specified coordinates.

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

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

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

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