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