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

时间:2013-03-21 15:27:37

标签: jquery tabs scroll

我是网页设计的初学者。我使用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>

有人可以告诉我如何添加代码,以便在点击每个标签时将网页滚动回顶部。我将非常感谢你的帮助。感谢名单

1 个答案:

答案 0 :(得分:5)

引自sourceThe 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() method

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