как сделать положение прокрутки страницы вверх, когда мы нажали jquery меню вертикальной вкладки

0

моя демонстрационная ссылка: http://www.bajistech.info/tiltindicators.html#TiltWatch-Plus1, я пытаюсь сделать прокрутку страницы, когда я нажимаю на вкладку "Вертикальная".

//script 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 sourcce

 <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>
  • 0
    В вашей демоверсии прокрутка работает нормально. Вы пытаетесь добиться эффекта анимированной прокрутки?
  • 0
    Привет, я хочу показать заголовок и верх страницы. Спасибо
Теги:

2 ответа

0

Ответ @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>
Поделиться
  • 0
    Привет, спасибо, я все еще не вижу заголовок.
  • 0
    @ user2913707 Я думал, что вы хотите перейти к вертикальной навигации. Вы можете прокрутить туда, куда вы хотите. scrollTop: $ ("# header"). offset (). top scrollTop: 1000
Показать ещё 1 комментарий
0

Добавить

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

к функции щелчка.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню