当我们单击jquery垂直选项卡菜单时如何使页面滚动位置到顶部

Question

我的演示链接：http://www.bajistech.info/tiltindicators.html#TiltWatch-Plus1，当我单击垂直选项卡时，我正在尝试使页面滚动。

//脚本1 $(document).ready(function(){

    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>

//脚本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>

Answer 1

添加

$('body').scrollTop(0);

到点击函数。

Answer 2

@dollarvar 的回答并不完美。

$('html').scrollTop(0); -- for IE only
$('body').scrollTop(0); -- for all browsers except IE
$('body,html').scrollTop(0); -- for all browser

我做了一个快速演示。代码如下：

HTML：

    <div style="height:400px; line-height:400px; background-color: gray; text-align:center; color:white; margin:20px;">Empty space for test</div>
    <ul id="verticalNav">
        <li><a href="#a">a</a></li>
        <li><a href="#b">b</a></li>
    </ul>
    <div id="sections">
        <div class="section" id="a">Content A. Content A. Content A. Content A. Content A. </div>
        <div class="section" id="b" style="display: none;">Content B. Content B. Content B. Content B. Content B. </div>
    </div>
    <div  style="height:800px; line-height:800px; background-color: gray; text-align:center; color:white; margin:20px;">Empty space for test</div>

jQuery:

<script type="text/javascript">
$(document).ready(function(){
    $("#verticalNav a").click(function(){
        // show or hide content
        $($(this).attr("href")).show().siblings().hide();

        // scroll to the position of #verticalNav
        $('body,html').animate({
            scrollTop: $("#verticalNav").offset().top
        }, "slow");

        return false;
    });
});
</script>