Показаны скрытые div с jquery и перемещением в начало страницы

Question

У меня есть div на моей странице, которая скрыта при загрузке. Использование JQuery Я хочу отобразить скрытый div и скрыть открытый div. Это мой код:

<script type="text/javascript"> 
// hides the slickbox as soon as the DOM is ready 
$('#details').hide(); 

// shows the slickbox on clicking the noted link 
$('#proceed').click(function() { 
    $('#details').show('slow'); 
    $('#contColL').hide('slow'); 
    $('#contColR').hide('slow'); 
    $('#intro').hide('slow'); 
    return false; 
}); 

$('#reviewPlate').click(function() { 
    $('#details').hide('slow'); 
    $('#contColL').show('slow'); 
    $('#contColR').show('slow'); 
    $('#intro').show('slow'); 
    return false; 
});    
</script> 

Это работает нормально, но я не могу получить новую страницу для отображения сверху. Вместо этого он отображает из названных div-деталей. Как я могу отобразить только что отображаемую страницу сверху?

Answer 1

Вы можете просто добавить строку для прокрутки страницы вверх в конце метода:

window.scrollTo(0,0) 

Или, если вы хотите, чтобы оживить свиток, вам анимированный верхней прокрутки:

$("html, body").animate({ scrollTop: "0px" }, 500); 

Где 500 - это продолжительность анимации.

Тогда ваш код будет выглядеть следующим образом:

<script type="text/javascript"> 
// hides the slickbox as soon as the DOM is ready 
$('#details').hide(); 

// shows the slickbox on clicking the noted link 
$('#proceed').click(function() { 
    $('#details').show('slow'); 
    $('#contColL').hide('slow'); 
    $('#contColR').hide('slow'); 
    $('#intro').hide('slow'); 
    $("html, body").animate({ scrollTop: "0px" }, 500); 
    return false; 
}); 

$('#reviewPlate').click(function() { 
    $('#details').hide('slow'); 
    $('#contColL').show('slow'); 
    $('#contColR').show('slow'); 
    $('#intro').show('slow'); 
    $("html, body").animate({ scrollTop: "0px" }, 500); 
    return false; 
});    
</script>