单击垂直选项卡时如何使页面滚动到顶部

时间:2013-12-03 03:59:15

标签: javascript jquery html css

我的演示链接:http://www.bajistech.info/tiltindicators.html#TiltWatch-Plus1,当我点击垂直标签时,我试图进行页面滚动。

//脚本1      $(文件)。就绪(函数(){

    if (
        $('ul#verticalNav li a').length &&
        $('div.section').length
    ) {
        $('div.section').css( 'display', 'none' );
        //$('ul#verticalNav li a').each(function() {
        $('ul#verticalNav li a').click(function() { 
            showSection( $(this).attr('href') );
        });
  // if hash found then load the tab from Hash id
        if(window.location.hash) 
        {
   // to get the div id
           showSection( window.location.hash);
        }
        else // if no hash found then default first tab is opened
        {
            $('ul#verticalNav li:first-child a').click();
        }
    }
});
</script>

// script 2

function showSection( sectionID ) {
    $('div.section').css( 'display', 'none' );
    $('div'+sectionID).css( 'display', 'block' );
}
$(document).ready(function(){

    if (
        $('ul#verticalNav li a').length &&
        $('div.section').length
    ) {
        $('div.section').css( 'display', 'none' );
        //$('ul#verticalNav li a').each(function() { // no need for each loop
        $('ul#verticalNav li a').click(function() { // Use $('ul#verticalNav li a').click
            showSection( $(this).attr('href') );
        });
        //});
        if(window.location.hash) // if hash found then load the tab from Hash id
        {
           showSection( window.location.hash);// to get the div id
        }
        else // if no hash found then default first tab is opened
        {
            $('ul#verticalNav li:first-child a').click();
        }
    }
});

html源代码

 <ul>
    <li><a href="#a">a</a></li>
    <li><a href="#b">b</a></li>          
    </ul>
    <div id="sections">
    <div class="section" id="a">
    </div>
    <div class="section" id="b">
    </div>

1 个答案:

答案 0 :(得分:0)

试试这个:

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

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